gxt_app/pages/order/detail/wbBackfillFinalize.uvue

<template>
    <view class="detail-page">
        <scroll-view class="detail-content" :scroll-y="true">
            <!-- 工单信息 -->
            <view class="info-section">
                <view class="section-title">
                    <text class="section-title-text">工单信息</text>
                </view>
                <view class="info-card">
                    <view class="info-item">
                        <text class="info-label">工单编码</text>
                        <text class="info-value">{{ workOrderProjectNo ?? '' }}</text>
                    </view>
                    <view class="info-item">
                        <text class="info-label">工单类型</text>
                        <text class="info-value">{{ orderType == '1' ? '维修工单' : '维保工单' }}</text>
                    </view>
                    <view class="info-item">
                        <text class="info-label">风机编号</text>
                        <text class="info-value">{{ pcsDeviceName ?? '' }}</text>
                    </view>
					<view class="info-item">
					    <text class="info-label">维保中心</text>
					    <text class="info-value">{{ gxtCenter ?? '' }}</text>
					</view>
                    <view class="info-item">
                        <text class="info-label">场站</text>
                        <text class="info-value">{{ pcsStationName ?? '' }}</text>
                    </view>
                    <view class="info-item">
                        <text class="info-label">机型</text>
                        <text class="info-value">{{ brand ?? '' }} {{ model ?? '' }}</text>
                    </view>
					<view class="info-item">
					    <text class="info-label">MIS工单</text>
					    <text class="info-value">{{ misNo ?? '' }}</text>
					</view>
					<view class="info-item">
					    <text class="info-label">工作票编号</text>
					    <text class="info-value">{{ workPermitNum ?? '' }}</text>
					</view>
					<view class="info-item">
					    <text class="info-label">接单时间</text>
					    <text class="info-value">{{ acceptTime ?? '' }}</text>
					</view>
                </view>
            </view>
            <!-- 结单表单 -->
            <view class="info-section">
                <view class="section-title">
                    <text class="section-title-text">结单信息</text>
                </view>
                <view class="info-card">

                    <!-- 开始时间 -->
                    <view class="info-item">
                        <view class="info-label">
                            <text class="form-label required">开始时间<text style="color: red;">*</text></text>
                        </view>
                        <view class="info-value">
                            <view class="form-picker" @click="showStartTimePicker = true">
								<input
								    class="input-field"
								    placeholder="请选择开始时间"
								    v-model="realStartTime"
								/>
                            </view>
                        </view>
                    </view>

                    <!-- 结束时间 -->
                    <view class="info-item">
                        <view class="info-label">
                            <text class="form-label required">结束时间<text style="color: red;">*</text></text>
                        </view>
                        <view class="info-value">
                            <view class="form-picker" @click="showEndTimePicker = true">
								<input
								    class="input-field"
								    placeholder="请选择结束时间"
								    v-model="realEndTime"
								/>
                            </view>
                        </view>
                    </view>

                    <!-- 外委人员数 -->
                    <view class="info-item">
                        <view class="info-label">
                            <text class="form-label required">外委人员数（人）</text>
                        </view>
                        <view class="info-value">
                            <input
                                type="number"
                                class="input-field"
                                placeholder="请输入外委人员数"
                                v-model="wwryNum"
                            />
                        </view>
                    </view>

                    <!-- 外来人员数 -->
                    <view class="info-item">
                        <view class="info-label">
                            <text class="form-label required">外来人员数（人）</text>
                        </view>
                        <view class="info-value">
                            <input
                                type="number"
                                class="input-field"
                                placeholder="请输入外来人员数"
                                v-model="wlryNum"
                            />
                        </view>
                    </view>

                    <!-- 工作负责人 -->
                    <view class="info-item">
                        <view class="info-label">
                            <text class="form-label required">工作负责人</text>
                        </view>
                        <view class="info-value">
                            <input
                                class="input-field"
                                placeholder="请输入工作负责人"
                                v-model="teamLeaderName"
                                :disabled="true"
                            />
                        </view>
                    </view>

                    <!-- 工作班成员选择（当信息录入为2时可编辑） -->
                    <view class="info-item">
                        <view class="info-label">
                            <text class="form-label required">工作班成员</text>
                        </view>
                        <view class="info-value">
                            <view class="input-with-clear">
								<input
									class="input-field"
									placeholder="请选择工作班成员"
									v-model="workGroupMemberName"
									@click="showUserSelect = true"
									:disabled="infoEntry == '1'"
								/>
								<text class="select-users-count" v-if="selectedUserIds.length > 0" :style="{ marginRight: selectedUserIds.length > 0 ? '60rpx' : '0' }">({{ selectedUserIds.length }}人)</text>
								<text class="select-clear" v-if="selectedUserIds.length > 0" @click="clearSelectedUsers">×</text>
							</view>
                        </view>
                    </view>

                    <!-- 维保内容 -->
                    <view class="info-item full-width">
                        <view class="info-label">
                            <text class="form-label required">维保内容<text style="color: red;">*</text></text>
                        </view>
                        <view class="info-value">
                            <textarea
                                class="textarea-field"
                                placeholder="请输入维保内容"
                                v-model="content"
                                maxlength="500"
                                :disabled="infoEntry == '1'"
                                :show-confirm-bar="false"
                                auto-height
                            ></textarea>
                        </view>
                    </view>

                    <!-- 附件上传 -->
                    <view class="info-item full-width">
                        <view class="info-label">
                            <text class="form-label">附件（可选）</text>
                        </view>
                        <view class="info-value">
                            <upload-image
                                :limit="8"
                                :modelValue="uploadedFiles"
                                :businessType="'workOrder'"
                                @update:modelValue="uploadedFiles = $event as UTSArray<UploadResponse>"
                            />
                        </view>
                    </view>
                </view>
            </view>


            <!-- 时间选择器弹窗 -->
			<!-- Start Date Picker -->
			<l-popup v-model="showStartTimePicker" position="bottom">
				<l-date-time-picker
					title="选择开始时间"
					:mode="1 | 2 | 4 | 8 | 16"
					format="YYYY-MM-DD HH:mm"
					:modelValue="realStartTime"
					confirm-btn="确定"
					cancel-btn="取消"
					@confirm="onStartDateConfirm"
					@cancel="showStartTimePicker = false">
				</l-date-time-picker>
			</l-popup>

			<!-- End Date Picker -->
			<l-popup v-model="showEndTimePicker" position="bottom">
				<l-date-time-picker
					title="选择结束时间"
					:mode="31"
					format="YYYY-MM-DD HH:mm"
					:modelValue="realStartTime"
					confirm-btn="确定"
					cancel-btn="取消"
					@confirm="onEndDateConfirm"
					@cancel="showEndTimePicker = false">
				</l-date-time-picker>
			</l-popup>

            <!-- 人员选择弹窗 -->
            <view v-if="showUserSelect" class="picker-modal">
                <view class="modal-mask" @click="showUserSelect = false"></view>
                <view class="modal-content">
                    <view class="modal-header">
                        <text class="modal-title">选择工作班成员</text>
                        <text class="modal-close" @click="confirmSelectedUsers">确定</text>
                    </view>
					<view class="search-bar">
						<view class="search-box">
							<image class="search-icon" src="/static/images/workbench/list/1.png" mode="aspectFit"></image>
							<input class="search-input" type="text" placeholder="搜索姓名" v-model="userKeyword" @input="handleSearch" />
							<text v-if="userKeyword.length > 0" class="clear-icon" @click="clearSearch">✕</text>
						</view>
					</view>
                    <scroll-view class="modal-body" scroll-y="true">
                        <view
                            v-for="(user, index) in userList"
                            :key="index"
                            class="picker-option"
                            @click="toggleUserSelection(user)"
                        >
                            <text class="option-text">{{ (user['nickName'] as string | null) ?? '' }}</text>
							<text class="option-text">{{ ((user['dept'] as UTSJSONObject | null)?.['deptName'] as string | null) ?? '' }}</text>
                            <text class="option-check" v-if="isSelected(user)">✓</text>
                        </view>
                    </scroll-view>
                </view>
            </view>
        </scroll-view>

        <!-- 确认结单按钮 -->
        <view class="accept-button-container">
            <button class="accept-button" @click="handleSubmit" :loading="submitLoading">{{ submitLoading ? '提交中...' : '确认结单' }}</button>
        </view>

        <!-- 加载中状态 -->
        <view v-if="loading" class="loading-mask">
            <text class="loading-text">加载中...</text>
        </view>
    </view>
</template>

<script setup lang="uts">
    import { ref } from 'vue'
    import type { acceptOrderInfo } from '../../../types/order'
    import type { WorkOrderFlow } from '../../../types/flow'
    import { getOrderInfoById, getRepairOrderInfoById, returnRepairOrder, finishOrder } from '../../../api/order/detail'
    import { getMisInfoList, listWorkPerson, getOrderList, listAutoMisInfo } from '../../../api/order/list'
    import type { SysDictData } from '../../../types/dict'
    import { getDictDataByType } from '../../../api/dict/index'
    import type { UserInfo } from '../../../types/user'
    import type { UploadResponse } from '../../../types/workbench'
    import {checkPermi} from '../../../utils/storage'
	import { getUserList, getLeaderList } from '../../../api/user/list'
    // import uploadImage from '../../../components/upload-image/upload-image.uvue'


	// 工单信息
	const orderId = ref<string>('')
	const workOrderProjectNo = ref<string>('')
	const workOrderStatus = ref<string>('')
	const orderType = ref<string>('')
	const pcsDeviceName = ref<string>('')
	const gxtCenter = ref<string>('')
	const pcsStationName = ref<string>('')
	const brand = ref<string>('')
	const model = ref<string>('')
	const acceptTime = ref<string>('')
	const returnType = ref<string>('')
	const returnReason = ref<string>("")
	const returnTypeLabel = ref<string>("")
	const acceptReturnType = ref<string>('')
	const acceptReturnReason = ref<string>("")
	const teamLeaderId = ref<Number | null>(null)
	const teamLeaderName = ref<string>('')
	const pauseTime = ref<string>('')
	const restartTime = ref<string>('')
	const misNo = ref<string>('') // MIS工单编码

	// 添加字典加载状态
	const dictLoaded = ref<boolean>(false)

    // 结单表单相关变量
    const infoEntry = ref<string>('') // 信息录入
    const workPermitNum = ref<string>('') // 工作票编号
    const realStartTime = ref<string>('') // 开始时间
    const realEndTime = ref<string>('') // 结束时间
    const wwryNum = ref<string>('') // 外委人员数
    const wlryNum = ref<string>('') // 外来人员数
    const workGroupMemberName = ref<string>('') // 工作班成员
    const content = ref<string>('') // 维保内容
    const attachmentUrls = ref<string>('') // 附件URLs（逗号分隔的字符串格式）
    const uploadedFiles = ref<UploadResponse[]>([]) // 上传的文件对象数组
	const workOrderPersonList = ref<UTSJSONObject[]>([]) // 工作班成员数组
	const selectedUserIds = ref<string[]>([]) // 选中的用户ID数组
	const selectedUsers = ref<UTSJSONObject[]>([]) // 选中的用户对象数组

    // 时间选择器相关变量
    const showStartTimePicker = ref<boolean>(false)
    const showEndTimePicker = ref<boolean>(false)
    const startTimeDate = ref<string>('')
    const startTimeTime = ref<string>('')
    const endTimeDate = ref<string>('')
    const endTimeTime = ref<string>('')
    
    // 搜索关键词
	const userKeyword = ref<string>('')
    // 人员选择相关变量
    const showUserSelect = ref<boolean>(false)
    const userList = ref<UTSJSONObject[]>([])
	const userAllList = ref<UTSJSONObject[]>([])

    // 信息录入选项
	const selectedMisInfoIndex = ref<number>(-1)

    // 获取用户列表
    const getUserAllList = async (): Promise<void> => {
        try {
            // 这里应该调用获取用户列表的API
            const result = await getLeaderList(-1); // 空参数调用
			const resultObj = result as UTSJSONObject;
			const code = resultObj['code'] as number
			const users = resultObj['data'] as UTSJSONObject[] | null
			if (code == 200 && users != null ) {
			    // 解析列表数据
				// const rows = resultObj['rows'] as UTSJSONObject[]
			    userList.value = users;
				userAllList.value = users
            // userList.value = result.data || [];
			}
        } catch (error) {
            console.error('获取用户列表失败:', error);
            uni.showToast({
                title: '获取用户列表失败',
                icon: 'none'
            });
        }
    };

    // 验证和提交
    const submitLoading = ref<boolean>(false)

    // 接受用户名
    const acceptUserName = ref<string>('')

	// 选择器选项类型
	type PickerOption = {
	    label: string
	    value: string
	}

	// 搜索
	const handleSearch = (): void => {
		const keyword = userKeyword.value
		userList.value = userAllList.value.filter(leader => {
			const nickName = leader['nickName'] as string | null
			return nickName != null && nickName.indexOf(keyword) >= 0
		})
	}

	// 清除用户搜索
	const clearSearch = (): void => {
	    userKeyword.value = "";
		userList.value = userAllList.value
	};

	function onStartDateConfirm(value: string) {
	  // 检查结束时间是否小于新的开始时间
	  if (realEndTime.value != '' && new Date(value) > new Date(realEndTime.value as string)) {
	    uni.showToast({ title: '开始时间不能大于结束时间', icon: 'none' })
	    return
	  }

	  realStartTime.value = value
	  showStartTimePicker.value = false
	}

	function onEndDateConfirm(value: string) {
	  // 检查新的结束时间是否小于开始时间
	  if (realStartTime.value != '' && new Date(realStartTime.value as string) > new Date(value)) {
	    uni.showToast({ title: '结束时间不能小于开始时间', icon: 'none' })
	    return
	  }

	  realEndTime.value = value
	  showEndTimePicker.value = false
	}

    // 检查用户是否已被选中
    const isSelected = (user: UTSJSONObject): boolean => {
        const userId = user['userId'] as string | number | null;
        if (userId !== null) {
            return selectedUserIds.value.includes(userId.toString());
        }
        // 如果没有userId，则比较nickName
        const nickName = user['nickName'] as string | null;
        if (nickName !== null) {
            return selectedUsers.value.some(selected =>
                (selected['nickName'] as string | null) === nickName
            );
        }
        return false;
    };

    // 切换用户选择状态
    const toggleUserSelection = (user: UTSJSONObject): void => {
        const userId = user['userId'] as string | number | null;
        const nickName = user['nickName'] as string | null;

        if (userId !== null) {
            const userIdStr = userId.toString();
            const index = selectedUserIds.value.indexOf(userIdStr);
            if (index > -1) {
                // 取消选择
                selectedUserIds.value.splice(index, 1);
                selectedUsers.value = selectedUsers.value.filter(selected =>
                    (selected['userId'] as string | number | null)?.toString() !== userIdStr
                );
            } else {
                // 添加选择
                selectedUserIds.value.push(userIdStr);
                selectedUsers.value.push(user);
            }
        } else if (nickName !== null) {
            // 如果没有userId，通过nickName来识别
            const index = selectedUsers.value.findIndex(selected =>
                (selected['nickName'] as string | null) === nickName
            );
            if (index > -1) {
                // 取消选择
                selectedUsers.value.splice(index, 1);
                // 同时移除对应的userId（如果有的话）
                const userToRemoveId = user['userId'] as string | number | null;
                if (userToRemoveId !== null) {
                    const idIndex = selectedUserIds.value.indexOf(userToRemoveId.toString());
                    if (idIndex > -1) {
                        selectedUserIds.value.splice(idIndex, 1);
                    }
                }
            } else {
                // 添加选择
                selectedUsers.value.push(user);
                const userToAddId = user['userId'] as string | number | null;
                if (userToAddId !== null) {
                    selectedUserIds.value.push(userToAddId.toString());
                }
            }
        }
    };

    // 确认选择的用户
    const confirmSelectedUsers = (): void => {
        // 将选中的用户姓名拼接成字符串
        const nickNames = selectedUsers.value
            .map(user => (user['nickName'] as string | null) ?? '')
            .filter(name => name !== '')
            .join(',');

        workGroupMemberName.value = nickNames;

        // 更新workOrderPersonList为选中的用户
        workOrderPersonList.value = [...selectedUsers.value];

        showUserSelect.value = false;
    };

	// 清空已选择的用户
    const clearSelectedUsers = (): void => {
        // 清空选中的用户数组
        selectedUsers.value = [];
        selectedUserIds.value = [];
        
        // 清空显示的用户名
        workGroupMemberName.value = '';
        
        // 清空工作班成员列表
        workOrderPersonList.value = [];
    };

    // 表单验证
    const validateForm = (): boolean => {
        if (infoEntry.value == '') {
            uni.showToast({
                title: '请选择信息录入方式',
                icon: 'none'
            });
            return false;
        }

        if (realStartTime.value == '') {
            uni.showToast({
                title: '请选择开始时间',
                icon: 'none'
            });
            return false;
        }

        if (realEndTime.value == '') {
            uni.showToast({
                title: '请选择结束时间',
                icon: 'none'
            });
            return false;
        }

        if (new Date(realEndTime.value) <= new Date(realStartTime.value)) {
            uni.showToast({
                title: '结束时间必须大于开始时间',
                icon: 'none'
            });
            return false;
        }
		
		
		// if (infoEntry.value == '2' && (workGroupMemberName.value == '' || selectedUsers.value.length == 0)) {
		//     uni.showToast({
		//         title: '请选择工作班成员',
		//         icon: 'none'
		//     });
		//     return false;
		// }

        return true;
    };

	const isDealing = ref(false)
	const hasDealed = ref(false)
	// 提交表单
	const handleSubmit = async (): Promise<void> => {
	    if (!validateForm()) {
	        return;
	    }

	    submitLoading.value = true;
	    try {
			if (isDealing.value || hasDealed.value) return // 双重保险
			isDealing.value = true
	        // 确保附件URLs是最新的逗号分隔格式
	        attachmentUrls.value = uploadedFiles.value.map(file => file.fileName).join(',');
	        const finishData = {
	            id: orderId.value,
	            orderType: orderType.value,
	            workOrderProjectNo: workOrderProjectNo.value,
	            infoEntry: infoEntry.value,
	            misNo: misNo.value,
	            workPermitNum: workPermitNum.value,
	            realStartTime: realStartTime.value,
	            realEndTime: realEndTime.value,
	            wwryNum: wwryNum.value,
	            wlryNum: wlryNum.value,
	            workGroupMemberName: workGroupMemberName.value,
	            content: content.value,
	            attachmentUrls: attachmentUrls.value,
				workOrderPersonList: workOrderPersonList.value,
				teamLeaderId: teamLeaderId.value,
				teamLeaderName: teamLeaderName.value,
				finalizeMethod: '2',
				workOrderStatus: 'completed'
	        } as UTSJSONObject;

	        const result = await finishOrder(finishData);
	        const resultObj = result as UTSJSONObject;
	        const code = resultObj['code'] as number;

	        if (code == 200) {
	            uni.showToast({
	                title: '结单成功',
	                icon: 'success'
	            });
				hasDealed.value = true
	            // 使用事件总线通知列表页面刷新
	            uni.$emit('refreshOrderList', {});
	            uni.$emit('refreshAssignedCount');
	            uni.$emit('refreshOverdueCount');

	            setTimeout(() => {
	                uni.navigateBack();
	            }, 800);
	        } else {
	            const msg = resultObj['msg'] as string;
	            uni.showToast({
	                title: msg.length > 0 ? msg : '结单失败',
	                icon: 'none'
	            });
	        }
	    } catch (error: any) {
	        console.error('结单失败:', error);
	        uni.showToast({
	            title: '结单失败',
	            icon: 'none'
	        });
	    } finally {
	        submitLoading.value = false;
			isDealing.value = false // 无论成功失败都解锁
	    }
	};


    const loading = ref<boolean>(false)

    // 加载详情数据
    const loadDetail = async (id: string, orderType?: string): Promise<void> => {
        try {
            loading.value = true
            let result: any;
            // 根据orderType决定调用哪个API
            if (orderType == '1') {
                // 维修工单
                result = await getRepairOrderInfoById(id)
            } else {
                // 维保工单
                result = await getOrderInfoById(id)
            }

            // 提取响应数据
            const resultObj = result as UTSJSONObject
			const code = resultObj['code'] as number
            const data = resultObj['data'] as UTSJSONObject | null
            if (code == 200 && data != null) {
				workOrderStatus.value = (data['workOrderStatus'] as string | null) ?? ''
				workOrderProjectNo.value = (data['workOrderProjectNo'] as string | null) ?? ''
				pcsDeviceName.value = (data['pcsDeviceName'] as string | null) ?? ''
				gxtCenter.value = (data['gxtCenter'] as string | null) ?? ''
				pcsStationName.value = (data['pcsStationName'] as string | null) ?? ''
				brand.value = (data['brand'] as string | null) ?? ''
				model.value = (data['model'] as string | null) ?? ''
				acceptTime.value = (data['acceptTime'] as string | null) ?? ''
				acceptUserName.value = (data['acceptUserName'] as string | null) ?? ''
				// 初始化结单表单默认值
				infoEntry.value = '1' // 默认为手工录入
				teamLeaderId.value = (data['teamLeaderId'] as Number | null) ?? null
				teamLeaderName.value = (data['teamLeaderName'] as string | null) ?? ''
				returnType.value = workOrderStatus.value == 'to_finish' ? '1' : ''
				content.value = (data['content'] as string | null) ?? ''
				misNo.value = (data['misNo'] as string | null) ?? ''
				workPermitNum.value = (data['workPermitNum'] as string | null) ?? ''
				
				const queryParams = {
					misNo: misNo.value,
				} as UTSJSONObject;
				const result =  await getMisInfoList(queryParams)
				// 提取响应数据
				const resultObj = result as UTSJSONObject
				const code = resultObj['code'] as number
				const misInfo = resultObj['rows'] as UTSJSONObject[] | null
				if (code == 200 && misInfo != null) {
					if(misInfo.length > 0) {
						realStartTime.value = (misInfo[0]['realStartTime'] as string | null) ?? ''
						realEndTime.value = (misInfo[0]['realEndTime'] as string | null) ?? ''
						// 查询相关工作班成员
						await listWorkPerson(misNo.value).then(response => {
							const responseObj = response as UTSJSONObject
							const rows = responseObj['rows'] as UTSJSONObject[] | null
							workOrderPersonList.value = rows ?? []
							if (rows != null && rows.length > 0) {
								// 查询负责人信息并回填
								for (const person of workOrderPersonList.value) {
								  // 严格判断isLeader为1（兼容数字/字符串类型）
								  if (person.isLeader == 1) {
									teamLeaderName.value = (person.nickName as string | null) ?? '';
									break; // 找到后立即停止循环
								  }
								}
								const nickNames = rows
									.map((person: UTSJSONObject) => (person['nickName'] as string | null) ?? '')
									.join(',');
								workGroupMemberName.value = nickNames;
							}
						})
					}
				}
			} else {
				const msg = resultObj['msg'] as string | null
				uni.showToast({
					title: msg ?? '加载失败',
					icon: 'none'
				})
			}
				
		} catch (e) {
			uni.showToast({
				title: (e as Error).message ?? '加载失败',
				icon: 'none'
			})
		} finally {
			loading.value = false
		}
    }

    // 页面加载
    onLoad((options: any) => {
        const params = options as UTSJSONObject
        const id = params['id'] as string | null
		const orderTypeParam = params['orderType'] as string | null
        if (id != null && orderTypeParam != null) {
            // 先尝试从参数中获取orderType
            // const orderTypeNumber = parseInt(orderTypeParam)
			orderType.value = orderTypeParam
			orderId.value = id
            loadDetail(id, orderTypeParam)
        }
    })
	// 初始化
	onMounted(() => {
        getUserAllList();
    })
</script>

<style lang="scss">
    .detail-page {
        flex: 1;
        background-color: #e8f0f9;
    }

    .detail-content {
        flex: 1;
        padding: 20rpx 0;
    }

    .info-section {
        margin: 0 30rpx 24rpx;

        .section-title {
            position: relative;
            padding-left: 20rpx;
            margin-bottom: 20rpx;

            &::before {
                // content: '';
                position: absolute;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 8rpx;
                height: 32rpx;
                background-color: #007aff;
                border-radius: 4rpx;
            }

            &-text {
                font-size: 32rpx;
                font-weight: bold;
                color: #333333;
            }
        }

        .info-card {
            background-color: #ffffff;
            border-radius: 16rpx;
            padding: 30rpx;

            .info-item {
                flex-direction: row;
                padding: 20rpx 0;
                border-bottom: 1rpx solid #f0f0f0;

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

                &.full-width {
                    flex-direction: column;

                    .info-label {
                        margin-bottom: 12rpx;
                    }

                    .info-value {
                        line-height: 44rpx;
                    }
                }

                .info-label {
                    width: 240rpx;
                    font-size: 28rpx;
                    color: #666666;
                    white-space: nowrap;
                }

                .info-value {
                    flex: 1;
                    font-size: 28rpx;
                    color: #333333;
                    text-align: left;

                    &.highlight {
                        color: #007aff;
                        font-weight: bold;
                    }

                    &.input {
                        text-align: left;
                        border: 1rpx solid #e0e0e0;
                        border-radius: 8rpx;
                        padding: 10rpx;
                    }
					
					.input-with-clear {
						position: relative;
						display: flex;
						align-items: center;
					}
					
					.select-clear {
						position: absolute;
						right: 20rpx;
						color: #ccc;
						text-align: center;
						font-size: 40rpx;
						font-weight: bold;
						z-index: 1;
					}
                }
            }

            .flow-item {
                padding: 20rpx 0;
                border-bottom: 1rpx solid #f0f0f0;

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

                .flow-header {
                    flex-direction: row;
                    justify-content: space-between;
                    margin-bottom: 10rpx;

                    .flow-operator {
                        font-size: 28rpx;
                        color: #333333;
                        font-weight: bold;
                    }

                    .flow-time {
                        font-size: 24rpx;
                        color: #999999;
                    }
                }

                .flow-content {
                    flex-direction: column;

                    .flow-action {
                        font-size: 26rpx;
                        color: #666666;
                        margin-bottom: 8rpx;
                    }

                    .flow-remark {
                        font-size: 24rpx;
                        color: #999999;
                        background-color: #f5f5f5;
                        padding: 10rpx;
                        border-radius: 8rpx;
                    }
                }
            }

            .no-data {
                text-align: center;
                padding: 40rpx 0;
                font-size: 28rpx;
                color: #999999;
            }
        }
    }

    .accept-button-container {
        padding: 30rpx 30rpx 50rpx;
        background-color: #ffffff;

        .accept-button {
            width: 100%;
            height: 80rpx;
            background-color: #007aff;
            color: #ffffff;
            font-size: 32rpx;
            border-radius: 16rpx;
            border: none;

            &:active {
                background-color: #0062cc;
            }
        }
    }

    .loading-mask {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        justify-content: center;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.3);

        .loading-text {
            padding: 30rpx 60rpx;
            background-color: rgba(0, 0, 0, 0.7);
            color: #ffffff;
            font-size: 28rpx;
            border-radius: 12rpx;
        }
    }
	.picker-modal {
	    position: fixed;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    z-index: 1000;
	}

	.modal-mask {
	    position: absolute;
	    top: 0;
	    left: 0;
	    right: 0;
	    bottom: 0;
	    background-color: rgba(0, 0, 0, 0.5);
	}

	.modal-content {
	    position: absolute;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    background-color: #ffffff;
	    border-top-left-radius: 16rpx;
	    border-top-right-radius: 16rpx;
	    min-height: 700rpx;
	}

	.modal-header {
	    flex-direction: row;
	    justify-content: space-between;
	    align-items: center;
	    padding: 30rpx;
	    border-bottom: 1rpx solid #f0f0f0;
	}

	.modal-title {
	    font-size: 32rpx;
	    font-weight: bold;
	    color: #333333;
	}

	.modal-close {
	    font-size: 28rpx;
	    color: #007aff;
	}

	.modal-body {
	    max-height: 800rpx;
		min-height: 800rpx;
	}

	.picker-option {
	    flex-direction: row;
	    justify-content: space-between;
	    align-items: center;
	    padding: 24rpx 30rpx;
	    border-bottom: 1rpx solid #f0f0f0;
	}

	.picker-option.selected {
	    background-color: #f8f9fa;
	}

	.picker-option:last-child {
	    border-bottom: none;
	}


	.option-text {
	    font-size: 28rpx;
	    color: #333333;
	    margin-bottom: 10rpx;
	}

	.option-text:last-child {
	    margin-bottom: 0;
	}

	.option-check {
	    font-size: 28rpx;
	    color: #007aff;
	}

	.empty-tip {
		justify-content: space-between;
		padding: 24rpx 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #999;
	}

	.picker-option {
	    flex-direction: row;
	    justify-content: space-between;
	    align-items: center;
	    padding: 24rpx 30rpx;
	    border-bottom: 1rpx solid #f0f0f0;
	}

	.picker-option:last-child {
	    border-bottom: none;
	}

	.picker-option.selected {
	    background-color: #f8f9fa;
	}

	.option-text {
	    font-size: 28rpx;
	    color: #333333;
	}

	.mis-list {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
}

	.empty-tip {
	    text-align: center;
	    padding: 40rpx;
	    color: #999;
	    font-size: 28rpx;
	}





.form-item {
	flex-direction: row;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.reject-reason-textarea {
    width: 100%;
    min-height: 100rpx;
    line-height: 1.5;
}

.input-field {
    width: 100%;
    height: 60rpx;
    padding: 0 20rpx;
    border: 1rpx solid #e0e0e0;
    border-radius: 8rpx;
    font-size: 28rpx;
    background-color: #f8f9fa;
}

.select-mis-btn {
    width: 150rpx;
    height: 60rpx;
    margin-left: 10rpx;
    background-color: #007aff;
    color: #fff;
    border: none;
    border-radius: 8rpx;
    font-size: 24rpx;
}

.textarea-field {
    width: 100%;
    min-height: 120rpx;
    padding: 20rpx;
    border: 1rpx solid #e0e0e0;
    border-radius: 8rpx;
    font-size: 28rpx;
    background-color: #f8f9fa;
}

.radio-label {
    display: flex;
    align-items: center;
    margin-right: 30rpx;
}

.quick-select-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1rpx solid #ddd;
    border-top: none;
    z-index: 1000;
    max-height: 300rpx;
}

.quick-select-item {
    padding: 20rpx;
    border-bottom: 1rpx solid #eee;
}

.mis-no {
    font-size: 28rpx;
    color: #333;
}

.search-bar {
		padding: 20rpx 30rpx;
		background-color: #d7eafe;
	}

	.search-box {
		flex-direction: row;
		align-items: center;
		height: 72rpx;
		padding: 0 24rpx;
		background-color: #f5f5f5;
		border-radius: 36rpx;

		.search-icon {
			width: 32rpx;
			height: 32rpx;
			margin-right: 12rpx;
		}

		.search-input {
			flex: 1;
			font-size: 28rpx;
			color: #333333;
		}

		.clear-icon {
			margin-left: 12rpx;
			font-size: 28rpx;
			color: #999999;
		}
	}

.mis-list {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.select-users-count {
    margin-left: 10rpx;
    font-size: 24rpx;
    color: #666;
}


</style>