all-project/mobile/src/pages/task/taskWaiting.vue

<template>
    <view class="task-waiting-container">
        <!-- 顶部导航 -->
        <u-navbar title="我的待办" :border-bottom="false" bg-color="#3c9cff" title-color="#fff">
            <view slot="left" @click="goBack">
                <u-icon name="arrow-left" color="#fff" size="22"></u-icon>
            </view>
        </u-navbar>

        <!-- 搜索区域 -->
        <view class="search-container">
            <u-search
                v-model="queryParams.flowName"
                placeholder="请输入流程定义名称"
                :show-action="true"
                action-text="搜索"
                :animation="true"
                @search="handleQuery"
                @custom="handleQuery"
            ></u-search>

            <!-- 申请人选择 -->
            <view class="filter-section">
                <view class="filter-item" @click="openUserSelect">
                    <u-icon name="account" size="20" color="#3c9cff"></u-icon>
                    <text class="filter-text">
                        {{
                            selectedUsers.length > 0
                                ? `已选择${selectedUsers.length}个申请人`
                                : '选择申请人'
                        }}
                    </text>
                    <u-badge
                        v-if="selectedUsers.length > 0"
                        :count="selectedUsers.length"
                        :max="99"
                    ></u-badge>
                    <u-icon name="arrow-right" size="16" color="#c0c4cc"></u-icon>
                </view>
            </view>
        </view>

        <!-- 加载状态 -->
        <u-loading-page
            :loading="loading && taskList.length === 0"
            loading-text="加载中..."
        ></u-loading-page>

        <!-- 待办任务列表 -->
        <view v-if="!loading || taskList.length > 0" class="content-wrapper">
            <!-- 空状态 -->
            <view v-if="taskList.length === 0 && !loading" class="empty-container">
                <u-empty text="暂无待办任务" mode="data"></u-empty>
            </view>

            <!-- 任务卡片列表 -->
            <view v-else class="task-list">
                <view v-for="(item, index) in taskList" :key="item.id || index" class="task-card">
                    <!-- 卡片头部 -->
                    <view class="card-header">
                        <view class="task-title">{{ item.flowName || '-' }}</view>
                        <view class="task-status">
                            <u-tag
                                :text="getFlowStatusText(item.flowStatus)"
                                :type="getFlowStatusType(item.flowStatus)"
                                size="mini"
                            ></u-tag>
                        </view>
                    </view>

                    <!-- 卡片内容 -->
                    <view class="card-content">
                        <view class="info-item">
                            <text class="label">流程编码:</text>
                            <text class="value">{{ item.flowCode || '-' }}</text>
                        </view>
                        <view class="info-item">
                            <text class="label">流程分类:</text>
                            <text class="value">{{ item.categoryName || '-' }}</text>
                        </view>
                        <view class="info-item">
                            <text class="label">任务名称:</text>
                            <text class="value">{{ item.nodeName || '-' }}</text>
                        </view>
                        <view class="info-item">
                            <text class="label">申请人:</text>
                            <text class="value">{{ item.createByName || '-' }}</text>
                        </view>
                        <view class="info-item">
                            <text class="label">办理人:</text>
                            <view class="assignee-tags">
                                <template v-if="item.assigneeNames">
                                    <u-tag
                                        v-for="(name, idx) in item.assigneeNames.split(',')"
                                        :key="idx"
                                        :text="name"
                                        type="success"
                                        size="mini"
                                        style="margin-right: 8rpx; margin-bottom: 8rpx"
                                    ></u-tag>
                                </template>
                                <u-tag v-else text="无" type="info" size="mini"></u-tag>
                            </view>
                        </view>
                        <view class="info-item">
                            <text class="label">创建时间:</text>
                            <text class="value">{{ formatTime(item.createTime) }}</text>
                        </view>
                    </view>

                    <!-- 操作按钮 -->
                    <view class="card-actions">
                        <view class="action-btn primary-btn" @click="handleApproval(item)">
                            <u-icon name="edit-pen" size="16" color="#3c9cff"></u-icon>
                            <text class="btn-text">办理</text>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 滚动加载更多 -->
            <u-loadmore
                v-if="taskList.length > 0"
                :status="loadmoreStatus"
                :load-text="{
                    loadmore: '轻轻上拉',
                    loading: '努力加载中',
                    nomore: '没有更多了',
                }"
                @loadmore="loadMore"
            ></u-loadmore>
        </view>

        <!-- 申请人选择弹窗 -->
        <u-popup
            :show="userSelectDialog.visible"
            mode="bottom"
            :round="14"
            @close="cancelUserSelect"
        >
            <view class="user-select-popup">
                <view class="popup-header">
                    <text class="popup-title">选择申请人</text>
                    <u-icon
                        name="close"
                        @click="cancelUserSelect"
                        size="24"
                        color="#909399"
                    ></u-icon>
                </view>

                <view class="popup-content">
                    <u-search
                        v-model="userSearchKeyword"
                        placeholder="搜索用户名或姓名"
                        :show-action="false"
                        @input="searchUsers"
                        style="height: 60rpx !important"
                    ></u-search>

                    <scroll-view scroll-y class="user-list">
                        <view
                            v-for="user in userList"
                            :key="user.userId"
                            class="user-item"
                            @click="toggleUserSelect(user)"
                        >
                            <view class="user-info">
                                <u-avatar :text="getAvatarText(user.nickName)" size="40"></u-avatar>
                                <view class="user-details">
                                    <text class="user-name">{{ user.nickName }}</text>
                                    <text class="user-username">{{ user.userName }}</text>
                                </view>
                            </view>
                            <u-checkbox
                                v-model="user.selected"
                                @change="onCheckboxChange(user, $event)"
                                @click.stop
                            ></u-checkbox>
                        </view>
                    </scroll-view>
                </view>

                <view class="popup-footer">
                    <u-button @click="cancelUserSelect" type="info" size="default">取消</u-button>
                    <u-button @click="confirmUserSelect" type="primary" size="default">
                        确定
                    </u-button>
                </view>
            </view>
        </u-popup>
    </view>
</template>

<script>
import { request } from '@/common/request.js';
import { getDict, getDictTagType } from '@/common/dict.js';

export default {
    name: 'TaskWaiting',
    data() {
        return {
            loading: false,
            taskList: [],
            total: 0,
            loadmoreStatus: 'loadmore', // loadmore, loading, nomore

            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                flowName: '', // 流程定义名称
                createByIds: [], // 申请人IDs
            },

            // 流程状态字典
            flowStatusDict: [],

            // 申请人选择相关
            userSelectDialog: {
                visible: false,
            },
            selectedUsers: [], // 已选择的申请人
            userList: [], // 用户列表
            userSearchKeyword: '', // 用户搜索关键词
            userSearchTimer: null, // 搜索防抖定时器
        };
    },

    async created() {
        await this.loadFlowStatusDict();
        await this.getList();
    },

    methods: {
        // 返回上一页
        goBack() {
            uni.navigateBack();
        },

        // 加载流程状态字典
        async loadFlowStatusDict() {
            try {
                this.flowStatusDict = await getDict('wf_business_status');
                console.log('流程状态字典加载完成:', this.flowStatusDict);
            } catch (error) {
                console.error('加载流程状态字典失败:', error);
            }
        },

        // 获取流程状态显示文本
        getFlowStatusText(status) {
            if (!this.flowStatusDict || this.flowStatusDict.length === 0) {
                // 字典未加载时的降级处理
                const statusMap = {
                    0: '待提交',
                    1: '审批中',
                    2: '已通过',
                    3: '已拒绝',
                    4: '已撤回',
                    5: '已终止',
                    6: '已作废',
                };
                return statusMap[status] || '未知';
            }

            const statusItem = this.flowStatusDict.find((item) => item.value === status);
            return statusItem ? statusItem.label : '未知';
        },

        // 获取流程状态标签类型
        getFlowStatusType(status) {
            const fallbackMap = {
                0: 'info', // 待提交
                1: 'warning', // 审批中
                2: 'success', // 已通过
                3: 'error', // 已拒绝
                4: 'info', // 已撤回
                5: 'error', // 已终止
                6: 'error', // 已作废
            };
            return getDictTagType(this.flowStatusDict, status, fallbackMap);
        },

        // 获取待办任务列表
        async getList(isLoadMore = false) {
            if (!isLoadMore) {
                this.loading = true;
                this.queryParams.pageNum = 1;
            } else {
                this.loadmoreStatus = 'loading';
            }

            try {
                const res = await request({
                    url: '/workflow/task/pageByTaskWait',
                    method: 'GET',
                    params: {
                        pageNum: this.queryParams.pageNum,
                        pageSize: this.queryParams.pageSize,
                        flowName: this.queryParams.flowName || undefined,
                        createByIds:
                            this.queryParams.createByIds.length > 0
                                ? this.queryParams.createByIds
                                : undefined,
                    },
                });

                if (res && res.code === 200) {
                    const newList = res.rows || [];

                    if (isLoadMore) {
                        this.taskList = [...this.taskList, ...newList];
                        // 判断是否还有更多数据
                        if (newList.length < this.queryParams.pageSize) {
                            this.loadmoreStatus = 'nomore';
                        } else {
                            this.loadmoreStatus = 'loadmore';
                        }
                    } else {
                        this.taskList = newList;
                        this.total = res.total || 0;
                        // 重置加载更多状态
                        if (this.taskList.length >= this.total) {
                            this.loadmoreStatus = 'nomore';
                        } else {
                            this.loadmoreStatus = 'loadmore';
                        }
                    }
                } else {
                    if (!isLoadMore) {
                        this.taskList = [];
                        this.total = 0;
                    }
                    uni.showToast({
                        title: res?.msg || '获取数据失败',
                        icon: 'none',
                    });
                    if (isLoadMore) {
                        this.loadmoreStatus = 'loadmore';
                    }
                }
            } catch (error) {
                console.error('获取待办任务列表失败:', error);
                if (!isLoadMore) {
                    this.taskList = [];
                    this.total = 0;
                }
                uni.showToast({
                    title: '获取数据失败',
                    icon: 'none',
                });
                if (isLoadMore) {
                    this.loadmoreStatus = 'loadmore';
                }
            } finally {
                if (!isLoadMore) {
                    this.loading = false;
                }
            }
        },

        // 搜索操作
        handleQuery() {
            this.getList();
        },

        // 加载更多
        loadMore() {
            if (this.loadmoreStatus === 'nomore' || this.loadmoreStatus === 'loading') {
                return;
            }

            this.queryParams.pageNum++;
            this.getList(true);
        },

        // 格式化时间
        formatTime(timeStr) {
            if (!timeStr) return '-';
            try {
                const date = new Date(timeStr);
                if (isNaN(date.getTime())) return timeStr;

                const year = date.getFullYear();
                const month = String(date.getMonth() + 1).padStart(2, '0');
                const day = String(date.getDate()).padStart(2, '0');
                const hours = String(date.getHours()).padStart(2, '0');
                const minutes = String(date.getMinutes()).padStart(2, '0');
                const seconds = String(date.getSeconds()).padStart(2, '0');

                return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
            } catch (error) {
                console.error('时间格式化失败:', error);
                return timeStr;
            }
        },

        // 办理任务
        handleApproval(row) {
            console.log('办理任务:', row);

            // 动态跳转到formPath对应的路径，携带businessId和taskId参数
            if (row.formPath) {
                // 确保路径以pages开头
                let fullPath = row.formPath;

                // 统一处理路径：去掉开头的/，然后添加pages前缀
                if (!fullPath.startsWith('pages/')) {
                    // 如果以/开头，先去掉/
                    if (fullPath.startsWith('/')) {
                        fullPath = fullPath.substring(1);
                    }
                    // 添加pages前缀
                    fullPath = `pages/${fullPath}`;
                }

                const url = `/${fullPath}?id=${row.businessId}&taskId=${row.id}&type=approval`;

                // 添加调试信息
                console.log('办理任务 - 原始formPath:', row.formPath);
                console.log('办理任务 - 处理后的fullPath:', fullPath);
                console.log('办理任务 - 最终跳转URL:', url);

                // 使用navigateTo进行跳转
                uni.navigateTo({
                    url: url,
                    fail: (err) => {
                        console.error('办理页面跳转失败:', err);
                        // 如果跳转失败，使用原有逻辑作为备选
                        this.fallbackApproval(row);
                    },
                });
            } else {
                // 如果没有formPath，使用原有逻辑作为备选
                this.fallbackApproval(row);
            }
        },

        // 备选办理方法（原有逻辑）
        fallbackApproval(row) {
            console.log('使用备选办理逻辑:', row);
            // 根据表单类型跳转到对应的审批页面
            if (row.formCustom === 'Y') {
                // 自定义表单
                uni.navigateTo({
                    url: `/pages/workflow/form/custom?businessId=${row.businessId}&taskId=${
                        row.id
                    }&formPath=${encodeURIComponent(row.formPath || '')}`,
                });
            } else {
                // 默认表单或其他类型
                uni.navigateTo({
                    url: `/pages/workflow/approval/index?businessId=${row.businessId}&taskId=${row.id}&type=approval`,
                });
            }
        },

        // 打开申请人选择
        openUserSelect() {
            this.userSelectDialog.visible = true;
            this.loadUserList();
        },

        // 取消申请人选择
        cancelUserSelect() {
            this.userSelectDialog.visible = false;
            this.userSearchKeyword = '';
        },

        // 确认申请人选择
        confirmUserSelect() {
            // 获取当前弹窗中选中的用户
            const currentSelected = this.userList.filter((user) => user.selected);

            console.log('确认选择 - 用户列表:', this.userList);
            console.log('确认选择 - 选中的用户:', currentSelected);

            if (currentSelected.length > 0) {
                // 如果有选中的用户，更新已选择的用户列表
                this.selectedUsers = currentSelected;
                this.queryParams.createByIds = currentSelected.map((user) => user.userId);
                console.log('更新选中用户:', this.selectedUsers);
            } else {
                // 如果没有选中任何用户，清空已选择的用户列表
                this.selectedUsers = [];
                this.queryParams.createByIds = [];
                console.log('清空选中用户');
            }

            this.userSelectDialog.visible = false;
            this.handleQuery();
        },

        // 切换用户选择状态
        toggleUserSelect(user) {
            this.$set(user, 'selected', !user.selected);
            console.log('切换用户选择:', user.nickName, '选中状态:', user.selected);
        },

        // checkbox变化处理
        onCheckboxChange(user, value) {
            console.log('Checkbox变化:', user.nickName, '新值:', value);
            this.$set(user, 'selected', value);
        },

        // 加载用户列表
        async loadUserList() {
            try {
                const res = await request({
                    url: '/system/user/list',
                    method: 'GET',
                    params: {
                        pageNum: 1,
                        pageSize: 100,
                        userName: this.userSearchKeyword || undefined,
                        nickName: this.userSearchKeyword || undefined,
                    },
                });

                if (res && res.code === 200) {
                    // 每次加载用户列表时，所有用户默认都不选中
                    this.userList = (res.rows || []).map((user) => ({
                        ...user,
                        selected: false,
                    }));
                    console.log('加载用户列表完成，用户数量:', this.userList.length);
                } else {
                    this.userList = [];
                    uni.showToast({
                        title: res?.msg || '获取用户列表失败',
                        icon: 'none',
                    });
                }
            } catch (error) {
                console.error('获取用户列表失败:', error);
                this.userList = [];
                uni.showToast({
                    title: '获取用户列表失败',
                    icon: 'none',
                });
            }
        },

        // 搜索用户（防抖处理）
        searchUsers() {
            if (this.userSearchTimer) {
                clearTimeout(this.userSearchTimer);
            }

            this.userSearchTimer = setTimeout(() => {
                this.loadUserList();
            }, 500);
        },

        // 获取头像显示文字（取前两个字符）
        getAvatarText(nickName) {
            if (!nickName) return '';
            // 取前两个字符，如果只有一个字符则返回该字符
            return nickName.length > 1 ? nickName.substring(0, 1) : nickName;
        },
    },
};
</script>

<style lang="scss" scoped>
.task-waiting-container {
    background-color: #f5f6fa;
    min-height: 100vh;
}

.search-container {
    padding: 20rpx;
    background-color: #fff;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.filter-section {
    margin-top: 20rpx;
}

.filter-item {
    display: flex;
    align-items: center;
    padding: 24rpx;
    background-color: #f8f9fa;
    border-radius: 12rpx;
    border: 1px solid #e4e7ed;

    &:active {
        background-color: #f0f0f0;
    }
}

.filter-text {
    flex: 1;
    margin-left: 16rpx;
    font-size: 28rpx;
    color: #303133;
}

.content-wrapper {
    padding: 20rpx;
}

.empty-container {
    padding: 100rpx 20rpx;
}

.task-list {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
}

.task-card {
    background-color: #fff;
    border-radius: 16rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx;
    border-bottom: 1px solid #f0f0f0;
}

.task-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #303133;
    flex: 1;
}

.task-status {
    margin-left: 16rpx;
}

.card-content {
    padding: 24rpx;
}

.info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 16rpx;

    &:last-child {
        margin-bottom: 0;
    }
}

.label {
    font-size: 28rpx;
    color: #606266;
    min-width: 140rpx;
    margin-right: 16rpx;
}

.value {
    font-size: 28rpx;
    color: #303133;
    flex: 1;
    word-break: break-all;
}

.assignee-tags {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.card-actions {
    display: flex;
    justify-content: flex-end;
    padding: 20rpx;
    border-top: 1px solid #f0f0f0;
}

.action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16rpx 40rpx;
    border-radius: 12rpx;
    background-color: #f8f9fa;
    min-width: 120rpx;
    transition: all 0.3s ease;

    &:active {
        transform: scale(0.95);
        opacity: 0.8;
    }
}

.btn-text {
    font-size: 24rpx;
    margin-top: 8rpx;
    color: #303133;
    font-weight: 500;
}

.primary-btn {
    background-color: rgba(60, 156, 255, 0);

    .btn-text {
        color: #3c9cff;
    }
}

// 申请人选择弹窗样式
.user-select-popup {
    background-color: #fff;
    border-radius: 14rpx 14rpx 0 0;
    overflow: hidden;
    height: 80vh;
    display: flex;
    flex-direction: column;
}

.popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24rpx;
    border-bottom: 1px solid #f0f0f0;
    flex-shrink: 0; /* 防止头部被压缩 */
}

.popup-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #303133;
}

.popup-content {
    flex: 1;
    padding: 24rpx 24rpx 0 24rpx; /* 底部不需要padding，由footer提供 */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* 防止内容溢出 */
}

.user-list {
    margin-top: 20rpx;
    flex: 1; /* 使用弹性布局，自动占满剩余空间 */
    overflow-y: auto; /* 添加垂直滚动条 */
    min-height: 0; /* 确保flex子元素可以收缩 */
}

.user-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 0;
    border-bottom: 1px solid #f8f9fa;

    &:last-child {
        border-bottom: none;
    }

    &:active {
        background-color: #f8f9fa;
    }
}

.user-info {
    display: flex;
    align-items: center;
    flex: 1;
}

.user-details {
    margin-left: 20rpx;
    flex: 1;
}

.user-name {
    display: block;
    font-size: 28rpx;
    color: #303133;
    font-weight: 500;
}

.user-username {
    display: block;
    font-size: 24rpx;
    color: #909399;
    margin-top: 4rpx;
}

.popup-footer {
    padding: 24rpx;
    border-top: 1px solid #f0f0f0;
    display: flex;
    gap: 20rpx;
    flex-shrink: 0; /* 防止底部按钮区域被压缩 */
    background-color: #fff; /* 确保背景色一致 */
}

// uview组件样式调整
::v-deep .u-search {
    background-color: #f5f6fa;
    /* 清除默认的 flex: 1 */
    flex: none;
}

// 弹窗内搜索框样式优化
.popup-content ::v-deep .u-search {
    background-color: #f8f9fa;
    border-radius: 8rpx;
    margin-bottom: 0; /* 移除默认margin */
}

.popup-content ::v-deep .u-search__content {
    height: 60rpx; /* 设置搜索框高度 */
    border-radius: 8rpx;
}

.popup-content ::v-deep .u-input {
    font-size: 28rpx; /* 调整输入框字体大小 */
}

::v-deep .u-tag {
    margin: 0;
}

::v-deep .u-loadmore {
    padding: 40rpx 0;
}
</style>