wlzboy
2026-01-24 2f09efc660bf2cc94cbc5291ad25ca06fc9bdadf
app/pagesTask/detail.vue
@@ -5,6 +5,10 @@
        <uni-icons type="arrowleft" size="20"></uni-icons>
      </view>
      <view class="title">任务详情</view>
      <view class="edit-btn" @click="handleEdit" v-if="taskDetail && !isTaskFinished">
        <uni-icons type="compose" size="20" color="#007AFF"></uni-icons>
        <text class="edit-text">修改</text>
      </view>
    </view>
    
    <scroll-view class="detail-content" scroll-y="true" v-if="taskDetail">
@@ -64,6 +68,17 @@
                  {{ isAssigneeReady(assignee) ? '已就绪' : '未就绪' }}
                </view>
              </view>
            </view>
            <!-- 当前登录人是该执行人且未就绪时显示就绪按钮 -->
            <view
              v-if="showAssigneeReadyFeature() && isAssigneeSelf(assignee) && !isAssigneeReady(assignee) && taskDetail.taskStatus === 'PENDING'"
              class="assignee-ready-btn"
              :data-user-id="assignee.userId || assignee.oaUserId"
              :data-user-name="assignee.userName"
              :data-index="index"
              @click="handleReadyClick"
            >
              点击就绪
            </view>
          </view>
        </view>
@@ -249,6 +264,23 @@
        </view>
      </view>
      
      <!-- 取消信息(仅在任务已取消且有取消原因时显示) -->
      <view class="detail-section" v-if="taskDetail.taskStatus === 'CANCELLED' && taskDetail.emergencyInfo && taskDetail.emergencyInfo.cancelReason">
        <view class="section-title">取消信息</view>
        <view class="info-item">
          <view class="label">取消原因</view>
          <view class="value">{{ getCancelReasonLabel(taskDetail.emergencyInfo.cancelReason) }}</view>
        </view>
        <view class="info-item" v-if="taskDetail.emergencyInfo.cancelBy">
          <view class="label">取消人</view>
          <view class="value">{{ taskDetail.emergencyInfo.cancelBy }}</view>
        </view>
        <view class="info-item" v-if="taskDetail.emergencyInfo.cancelTime">
          <view class="label">取消时间</view>
          <view class="value">{{ formatTime(taskDetail.emergencyInfo.cancelTime) }}</view>
        </view>
      </view>
      <!-- 支付记录明细 -->
      <view class="detail-section" v-if="paymentInfo && paymentInfo.paidPayments && paymentInfo.paidPayments.length > 0">
        <view class="section-title">支付记录</view>
@@ -356,48 +388,100 @@
      <text>加载中...</text>
    </view>
    
    <!-- 强制完成对话框 -->
    <uni-popup ref="forceCompletePopup" type="center" :is-mask-click="false">
      <view class="force-complete-dialog">
        <view class="dialog-title">请输入时间</view>
        <view class="time-picker-item">
          <view class="time-label">转运开始时间</view>
          <picker
            mode="date"
            :value="getDateFromDateTime(forceCompleteForm.actualStartTime)"
            @change="selectStartDate"
          >
            <view class="picker-value">{{ getDateFromDateTime(forceCompleteForm.actualStartTime) || '请选择日期' }}</view>
          </picker>
          <picker
            mode="time"
            :value="getTimeFromDateTime(forceCompleteForm.actualStartTime)"
            @change="selectStartTime"
          >
            <view class="picker-value">{{ getTimeFromDateTime(forceCompleteForm.actualStartTime) || '请选择时间' }}</view>
          </picker>
        </view>
        <view class="time-picker-item">
          <view class="time-label">转运结束时间</view>
          <picker
            mode="date"
            :value="getDateFromDateTime(forceCompleteForm.actualEndTime)"
            @change="selectEndDate"
          >
            <view class="picker-value">{{ getDateFromDateTime(forceCompleteForm.actualEndTime) || '请选择日期' }}</view>
          </picker>
          <picker
            mode="time"
            :value="getTimeFromDateTime(forceCompleteForm.actualEndTime)"
            @change="selectEndTime"
          >
            <view class="picker-value">{{ getTimeFromDateTime(forceCompleteForm.actualEndTime) || '请选择时间' }}</view>
          </picker>
        </view>
        <view class="dialog-buttons">
          <button class="cancel-btn" @click="closeForceCompleteDialog">取消</button>
          <button class="confirm-btn" @click="confirmForceComplete">确定</button>
        </view>
      </view>
    </uni-popup>
    <!-- 取消原因选择对话框 -->
    <uni-popup ref="cancelPopup" type="center" :is-mask-click="false">
      <view class="cancel-dialog">
        <view class="dialog-title">请选择取消原因</view>
        <picker mode="selector" :range="cancelReasonList" range-key="label" @change="selectCancelReason">
          <view class="reason-picker">
            <view class="picker-label">取消原因</view>
            <view class="picker-value">
              {{ selectedCancelReasonLabel }}
            </view>
            <uni-icons type="arrowright" size="16"></uni-icons>
          </view>
        </picker>
        <view class="dialog-buttons">
          <button class="cancel-btn" @click="closeCancelDialog">取消</button>
          <button class="confirm-btn" @click="confirmCancelTask">确定</button>
        </view>
      </view>
    </uni-popup>
    <!-- 操作按钮区域 -->
    <view class="action-buttons" v-if="taskDetail">
      <!-- 待处理状态: 显示编辑、出发、取消 -->
      <template v-if="taskDetail.taskStatus === 'PENDING'">
      <!-- 待处理状态: 显示出发、取消、强制完成 -->
      <template v-if="taskDetail.taskStatus === 'PENDING' ">
        <button 
          class="action-btn edit"
          @click="handleEdit"
          v-if="canOperateTask()"
          class="action-btn primary"
          @click="handleDepartAction()"
        >
          修改
          出发
        </button>
        <template v-if="isCurrentUserAssignee()">
          <button
            v-if="showAssigneeReadyFeature() && isMultipleAssignees() && !isCurrentUserReady()"
            class="action-btn primary"
            @click="handleReadyAction()"
          >
            就绪
          </button>
          <button
            class="action-btn primary"
            @click="handleDepartAction()"
          >
            出发
          </button>
          <button
            class="action-btn cancel"
            @click="handleTaskAction('cancel')"
          >
            取消
          </button>
        </template>
        <button
          class="action-btn cancel"
          @click="handleTaskAction('cancel')"
        >
          取消
        </button>
        <button
          v-if="canOperateTask() && showForceCompleteFeature()"
          class="action-btn force-complete"
          @click="showForceCompleteTimeDialog()"
        >
          强制完成
        </button>
      </template>
      
      <!-- 出发中状态: 显示编辑、已到达、强制结束 -->
      <!-- 出发中状态: 显示已到达、强制结束、强制完成 -->
      <template v-else-if="taskDetail.taskStatus === 'DEPARTING'">
        <button
          class="action-btn edit"
          @click="handleEdit"
        >
          修改
        </button>
        <template v-if="isCurrentUserAssignee()">
        <template v-if="canOperateTask()">
          <button 
            class="action-btn primary" 
            @click="handleTaskAction('arrive')"
@@ -410,18 +494,19 @@
          >
            强制结束
          </button>
          <button
            v-if="showForceCompleteFeature()"
            class="action-btn force-complete"
            @click="showForceCompleteTimeDialog()"
          >
            强制完成
          </button>
        </template>
      </template>
      
      <!-- 已到达状态: 显示编辑、已返程 -->
      <!-- 已到达状态: 显示已返程 -->
      <template v-else-if="taskDetail.taskStatus === 'ARRIVED'">
        <button
          class="action-btn edit"
          @click="handleEdit"
        >
          修改
        </button>
        <template v-if="isCurrentUserAssignee()">
        <template v-if="canOperateTask()">
          <button 
            class="action-btn primary" 
            @click="handleTaskAction('return')"
@@ -431,21 +516,34 @@
        </template>
      </template>
      
      <!-- 返程中状态: 显示编辑、已完成 -->
      <!-- 返程中状态: 显示已完成 -->
      <template v-else-if="taskDetail.taskStatus === 'RETURNING'">
        <button
          class="action-btn edit"
          @click="handleEdit"
        >
          修改
        </button>
        <template v-if="isCurrentUserAssignee()">
        <template v-if="canOperateTask()">
          <button 
            class="action-btn primary" 
            @click="handleTaskAction('complete')"
          >
            已完成
          </button>
        </template>
      </template>
      <!-- 处理中状态: 显示强制完成、取消 -->
      <template v-else-if="taskDetail.taskStatus === 'IN_PROGRESS'">
        <template v-if="canOperateTask()">
           <button
            class="action-btn primary"
            @click="handleTaskAction('arrive')"
          >
            已到达
          </button>
          <button
            v-if="showForceCompleteFeature()"
            class="action-btn force-complete"
            @click="showForceCompleteTimeDialog()"
          >
            强制完成
          </button>
        </template>
      </template>
      
@@ -467,6 +565,7 @@
  import { getTask, changeTaskStatus, setAssigneeReady, checkTaskConsentAttachment } from '@/api/task'
  import { checkVehicleActiveTasks } from '@/api/task'
  import { getPaymentInfo } from '@/api/payment'
  import { getDicts } from '@/api/dict'
  import { formatDateTime } from '@/utils/common'
  import { validateTaskForDepart, validateTaskForSettlement, getTaskVehicleId, checkTaskCanDepart } from '@/utils/taskValidator'
  import AttachmentUpload from './components/AttachmentUpload.vue'
@@ -480,7 +579,15 @@
      return {
        taskDetail: null,
        taskId: null,
        paymentInfo: null // 支付信息
        paymentInfo: null, // 支付信息
        cancelReasonList: [], // 取消原因列表
        showCancelDialog: false, // 显示取消原因对话框
        selectedCancelReason: '', // 选中的取消原因
        showForceCompleteDialog: false, // 显示强制完成对话框
        forceCompleteForm: {
          actualStartTime: '',
          actualEndTime: ''
        }
      }
    },
    computed: {
@@ -503,7 +610,17 @@
          }
          return [baseClass, roleClasses[userType] || '']
        }
      },      // 显示任务类型
      },
      // 获取选中的取消原因标签(用于弹窗显示)
      selectedCancelReasonLabel() {
        if (!this.selectedCancelReason || !this.cancelReasonList.length) {
          return '请选择'
        }
        const reason = this.cancelReasonList.find(r => r.value === this.selectedCancelReason)
        return reason ? reason.label : '请选择'
      },
      // 显示任务类型
      displayTaskType() {
        if (!this.taskDetail || !this.taskDetail.taskType) {
          return '未设置'
@@ -581,6 +698,7 @@
    onLoad(options) {
      this.taskId = options.id
      this.loadTaskDetail()
      this.loadCancelReasonDict() // 加载取消原因字典
    },
    onShow() {
      // 每次页面显示时重新加载数据,确保从编辑页面返回后能看到最新数据
@@ -810,10 +928,8 @@
            break;
            
          case 'cancel':
            // 取消 -> 二次确认后状态变为已取消
            this.$modal.confirm('确定要取消此任务吗?').then(() => {
              this.updateTaskStatus('CANCELLED', '任务已取消')
            }).catch(() => {});
            // 取消 -> 显示取消原因选择对话框
            this.showCancelReasonDialog();
            break;
            
          case 'arrive':
@@ -824,10 +940,8 @@
            break;
            
          case 'forceCancel':
            // 强制结束 -> 状态变为已取消
            this.$modal.confirm('确定要强制结束此任务吗?').then(() => {
              this.updateTaskStatus('CANCELLED', '任务已强制结束')
            }).catch(() => {});
            // 强制结束 -> 显示取消原因选择对话框
            this.showCancelReasonDialog();
            break;
            
          case 'return':
@@ -964,16 +1078,27 @@
            title: '检查附件...'
          });
          
          const response = await checkTaskConsentAttachment(this.taskId);
          // 注意:这里会被请求拦截器处理,code !== 200 时会 reject
          const response = await checkTaskConsentAttachment(this.taskId).catch(err => {
            // 拦截器 reject 的情况,返回一个默认对象
            console.log('请求被拦截器 reject,err:', err);
            return { code: -1, msg: '未上传知情同意书' };
          });
          
          uni.hideLoading();
          console.log('检查附件结果:', response);
          
          if (response.code === 200) {
          // 后台返回 code: 200 表示已上传,code: -1 表示未上传
          if (response && response.code === 200) {
            // 已上传知情同意书,继续更新状态
            console.log('已上传知情同意书,继续完成任务');
            this.getLocationAndUpdateStatus(status, remark);
          } else {
            // 未上传知情同意书,显示提示
            this.$modal.confirm('任务未上传知情同意书,无法完成任务。是否现在去上传?').then(() => {
            // 未上传知情同意书或其他错误,阻止完成
            const message = (response && response.msg) || '任务未上传知情同意书,无法完成任务';
            console.log('未上传知情同意书,阻止完成');
            this.$modal.confirm(message + '。是否现在去上传?').then(() => {
              // 滚动到附件上传区域
              this.$nextTick(() => {
                uni.pageScrollTo({
@@ -985,17 +1110,15 @@
          }
        } catch (error) {
          uni.hideLoading();
          console.error('检查附件失败:', error);
          console.error('检查附件异常:', error);
          
          // 如果检查失败,询问用户是否继续
          this.$modal.confirm('检查附件状态失败,是否继续完成任务?').then(() => {
            this.getLocationAndUpdateStatus(status, remark);
          }).catch(() => {});
          // 如果检查失败(网络异常等),不允许完成任务
          this.$modal.showToast('检查附件状态失败,无法完成任务');
        }
      },
      
      // 获取位置信息并更新状态
      getLocationAndUpdateStatus(status, remark) {
      getLocationAndUpdateStatus(status, remark, cancelReason) {
        const that = this
        
        // 使用uni.getLocation获取GPS位置
@@ -1022,6 +1145,11 @@
              heading: res.direction || res.heading
            }
            
            // 如果有取消原因,添加到请求数据中
            if (cancelReason) {
              statusData.cancelReason = cancelReason
            }
            changeTaskStatus(that.taskId, statusData).then(response => {
              that.$modal.showToast('状态更新成功')
              // 重新加载任务详情
@@ -1039,6 +1167,11 @@
              const statusData = {
                taskStatus: status,
                remark: remark
              }
              // 如果有取消原因,添加到请求数据中
              if (cancelReason) {
                statusData.cancelReason = cancelReason
              }
              
              changeTaskStatus(that.taskId, statusData).then(response => {
@@ -1313,9 +1446,14 @@
        console.log('附件删除成功:', attachmentId)
      },
      // 是否显示“就绪”功能(配置开关)
      // 是否显示"就绪"功能(配置开关)
      showAssigneeReadyFeature() {
        return !!(config && config.features && config.features.showAssigneeReadyButton)
      },
      // 是否显示"强制完成"功能(配置开关)
      showForceCompleteFeature() {
        return !!(config && config.features && config.features.showForceCompleteButton)
      },
      // 当前用户是否为该执行人
@@ -1323,18 +1461,53 @@
        const userId = this.$store && this.$store.state && this.$store.state.user && this.$store.state.user.userId
        return assignee && (assignee.userId === userId || assignee.oaUserId === userId)
      },
      // 执行人点击“就绪”
      markAssigneeReady(assignee) {
        if (!assignee || !this.taskDetail) {
          this.$modal.showToast('执行人或任务信息不存在')
      // 处理就绪按钮点击(通过data属性获取执行人信息)
      handleReadyClick(e) {
        const dataset = e.currentTarget.dataset
        const index = dataset.index
        console.log('handleReadyClick - dataset:', dataset)
        console.log('handleReadyClick - index:', index)
        if (index === undefined || index === null) {
          this.$modal.showToast('无法获取执行人索引')
          return
        }
        const assignee = this.taskDetail.assignees[index]
        console.log('handleReadyClick - assignee:', assignee)
        if (!assignee) {
          this.$modal.showToast('执行人信息不存在')
          return
        }
        this.markAssigneeReady(assignee)
      },
      // 执行人点击"就绪"
      markAssigneeReady(assignee) {
        console.log('markAssigneeReady 被调用,参数:', assignee)
        console.log('taskDetail:', this.taskDetail)
        if (!this.taskDetail) {
          this.$modal.showToast('任务信息不存在')
          return
        }
        if (!assignee) {
          this.$modal.showToast('执行人信息不存在')
          return
        }
        const userId = assignee.userId || assignee.oaUserId
        console.log('执行人ID:', userId)
        if (!userId) {
          this.$modal.showToast('无法识别执行人ID')
          return
        }
        this.$modal.showLoading && this.$modal.showLoading('提交中...')
        setAssigneeReady(this.taskId).then(() => {
          this.$modal.hideLoading && this.$modal.hideLoading()
@@ -1354,6 +1527,19 @@
        console.log("当前用户ID:", userId)
        const list = (this.taskDetail && Array.isArray(this.taskDetail.assignees)) ? this.taskDetail.assignees : []
        return list.some(a => a && (a.userId === userId || a.oaUserId === userId))
      },
      // 是否当前用户可以操作任务(执行人或管理员)
      canOperateTask() {
        // 检查是否是管理员(canViewAllConsult === '1')
        const canViewAllConsult = this.$store && this.$store.state && this.$store.state.user && this.$store.state.user.canViewAllConsult
        console.log("当前用户是否是管理员:", canViewAllConsult)
        if (canViewAllConsult === '1') {
          return true
        }
        // 检查是否是任务执行人
        return this.isCurrentUserAssignee()
      },
      // 是否多人执行
@@ -1470,6 +1656,229 @@
        return 'payment-' + (key !== null && key !== undefined ? key : index);
      },
      
      // 加载取消原因字典
      loadCancelReasonDict() {
        // 从后端获取取消原因字典
        getDicts('task_cancel_reason').then(response => {
          if (response.code === 200 && response.data) {
            this.cancelReasonList = response.data.map(item => ({
              value: item.dictValue,
              label: item.dictLabel
            }))
          }
        }).catch(error => {
          console.error('加载取消原因字典失败:', error)
        })
      },
      // 显示取消原因对话框
      showCancelReasonDialog() {
        this.selectedCancelReason = ''
        this.$refs.cancelPopup.open()
      },
      // 确认取消任务
      confirmCancelTask() {
        if (!this.selectedCancelReason) {
          this.$modal.showToast('请选择取消原因')
          return
        }
        this.$refs.cancelPopup.close()
        // 调用更新状态方法,传递取消原因
        this.updateTaskStatusWithCancelReason('CANCELLED', '任务已取消', this.selectedCancelReason)
      },
      // 取消对话框关闭
      closeCancelDialog() {
        this.$refs.cancelPopup.close()
        this.selectedCancelReason = ''
      },
      // 选择取消原因
      selectCancelReason(e) {
        const index = parseInt(e.detail.value)
        if (this.cancelReasonList && this.cancelReasonList[index]) {
          this.selectedCancelReason = this.cancelReasonList[index].value
        }
      },
      // 带取消原因的状态更新
      updateTaskStatusWithCancelReason(status, remark, cancelReason) {
        this.getLocationAndUpdateStatus(status, remark, cancelReason)
      },
      // 根据取消原因value获取label
      getCancelReasonLabel(value) {
        if (!value || !this.cancelReasonList.length) {
          return value || '未知'
        }
        const reason = this.cancelReasonList.find(r => r.value === value)
        return reason ? reason.label : value
      },
      // 显示强制完成时间对话框
      showForceCompleteTimeDialog() {
        // 校验任务是否满足强制完成条件
        const validation = this.validateForceComplete()
        if (!validation.valid) {
          this.$modal.showToast(validation.message)
          return
        }
        // 重置表单
        const now = new Date()
        const nowDateStr = this.formatDateForPicker(now)
        const nowTimeStr = this.formatTimeForPicker(now)
        // 开始时间:优先使用预约时间,如果没有则使用当前时间
        let startTimeStr = nowDateStr + ' ' + nowTimeStr
        if (this.taskDetail && this.taskDetail.plannedStartTime) {
          const plannedTime = new Date(this.taskDetail.plannedStartTime)
          const year = plannedTime.getFullYear()
          // 检查是否是有效时间(排除1900、1970等无效年份)
          if (year > 2000) {
            const plannedDateStr = this.formatDateForPicker(plannedTime)
            const plannedTimeStr = this.formatTimeForPicker(plannedTime)
            startTimeStr = plannedDateStr + ' ' + plannedTimeStr
          }
        }
        this.forceCompleteForm = {
          actualStartTime: startTimeStr,
          actualEndTime: nowDateStr + ' ' + nowTimeStr
        }
        this.$refs.forceCompletePopup.open()
      },
      // 校验是否可以强制完成
      validateForceComplete() {
        if (!this.taskDetail) {
          return { valid: false, message: '任务信息不存在' }
        }
        // 检查是否有执行人
        if (!this.taskDetail.assignees || this.taskDetail.assignees.length === 0) {
          return { valid: false, message: '请先分配执行人' }
        }
        // 检查是否有车辆
        if (!this.taskDetail.assignedVehicles || this.taskDetail.assignedVehicles.length === 0) {
          return { valid: false, message: '请先分配执行车辆' }
        }
        return { valid: true }
      },
      // 关闭强制完成对话框
      closeForceCompleteDialog() {
        this.$refs.forceCompletePopup.close()
      },
      // 确认强制完成
      confirmForceComplete() {
        // 校验时间
        if (!this.forceCompleteForm.actualStartTime || !this.forceCompleteForm.actualEndTime) {
          this.$modal.showToast('请选择开始和结束时间')
          return
        }
        const startTime = new Date(this.forceCompleteForm.actualStartTime)
        const endTime = new Date(this.forceCompleteForm.actualEndTime)
        if (startTime >= endTime) {
          this.$modal.showToast('结束时间必须大于开始时间')
          return
        }
        this.$refs.forceCompletePopup.close()
        // 调用API更新任务
        this.forceCompleteTask()
      },
      // 强制完成任务
      forceCompleteTask() {
        uni.showLoading({
          title: '处理中...'
        })
        const statusData = {
          taskStatus: 'COMPLETED',
          actualStartTime: this.forceCompleteForm.actualStartTime,
          actualEndTime: this.forceCompleteForm.actualEndTime,
          remark: '强制完成任务'
        }
        changeTaskStatus(this.taskId, statusData).then(response => {
          uni.hideLoading()
          this.$modal.showToast('任务已完成')
          // 重新加载任务详情
          this.loadTaskDetail()
        }).catch(error => {
          uni.hideLoading()
          console.error('强制完成任务失败:', error)
          this.$modal.showToast('操作失败,请重试')
        })
      },
      // 选择开始日期
      selectStartDate(e) {
        const date = e.detail.value
        const time = this.getTimeFromDateTime(this.forceCompleteForm.actualStartTime) || '00:00'
        this.forceCompleteForm.actualStartTime = date + ' ' + time
      },
      // 选择开始时间
      selectStartTime(e) {
        const time = e.detail.value
        const date = this.getDateFromDateTime(this.forceCompleteForm.actualStartTime) || this.formatDateForPicker(new Date())
        this.forceCompleteForm.actualStartTime = date + ' ' + time
      },
      // 选择结束日期
      selectEndDate(e) {
        const date = e.detail.value
        const time = this.getTimeFromDateTime(this.forceCompleteForm.actualEndTime) || '00:00'
        this.forceCompleteForm.actualEndTime = date + ' ' + time
      },
      // 选择结束时间
      selectEndTime(e) {
        const time = e.detail.value
        const date = this.getDateFromDateTime(this.forceCompleteForm.actualEndTime) || this.formatDateForPicker(new Date())
        this.forceCompleteForm.actualEndTime = date + ' ' + time
      },
      // 从日期时间字符串中提取日期
      getDateFromDateTime(dateTimeStr) {
        if (!dateTimeStr) return ''
        return dateTimeStr.split(' ')[0] || ''
      },
      // 从日期时间字符串中提取时间
      getTimeFromDateTime(dateTimeStr) {
        if (!dateTimeStr) return ''
        return dateTimeStr.split(' ')[1] || ''
      },
      // 格式化日期为 picker 需要的格式 (YYYY-MM-DD)
      formatDateForPicker(date) {
        const year = date.getFullYear()
        const month = String(date.getMonth() + 1).padStart(2, '0')
        const day = String(date.getDate()).padStart(2, '0')
        return `${year}-${month}-${day}`
      },
      // 格式化时间为 picker 需要的格式 (HH:mm)
      formatTimeForPicker(date) {
        const hour = String(date.getHours()).padStart(2, '0')
        const minute = String(date.getMinutes()).padStart(2, '0')
        return `${hour}:${minute}`
      },
    }
  }
</script>
@@ -1498,9 +1907,25 @@
      }
      
      .title {
        flex: 1;
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
      }
      .edit-btn {
        width: 120rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        .edit-text {
          margin-left: 8rpx;
          font-size: 28rpx;
          color: #007AFF;
        }
      }
    }
    
@@ -1598,6 +2023,9 @@
            }
            
            .assignee-role {
              display: flex;
              align-items: center;
              .role-tag {
                display: inline-block;
                padding: 4rpx 12rpx;
@@ -1618,15 +2046,6 @@
                }
              }
              
              .assignee-ready-btn {
                margin-left: 12rpx;
                padding: 8rpx 16rpx;
                font-size: 24rpx;
                border-radius: 6rpx;
                background-color: #34C759;
                color: #fff;
                border: none;
              }
              .ready-badge {
                display: inline-block;
                margin-left: 12rpx;
@@ -1643,6 +2062,17 @@
                }
              }
            }
          }
          .assignee-ready-btn {
            margin-left: 12rpx;
            padding: 8rpx 16rpx;
            font-size: 24rpx;
            border-radius: 6rpx;
            background-color: #34C759;
            color: #fff;
            border: none;
            flex-shrink: 0;
          }
        }
      }
@@ -1811,10 +2241,13 @@
        flex: 1;
        height: 80rpx;
        border-radius: 10rpx;
        font-size: 30rpx;
        font-size: 28rpx;
        margin: 0 10rpx;
        background-color: #f0f0f0;
        color: #333;
        white-space: nowrap;
        padding: 0 10rpx;
        min-width: 0;
        
        &.edit {
          background-color: #ff9500;
@@ -1831,8 +2264,18 @@
          color: white;
        }
        
        &.force-end {
          background-color: #ff6b22;
          color: white;
        }
        &.settlement {
          background-color: #34C759;
          color: white;
        }
        &.force-complete {
          background-color: #5856d6;
          color: white;
        }
        
@@ -1867,5 +2310,136 @@
      margin-left: 10rpx;
      vertical-align: middle;
    }
    // 取消原因对话框样式
    .cancel-dialog {
      width: 600rpx;
      background-color: white;
      border-radius: 20rpx;
      padding: 40rpx;
      .dialog-title {
        font-size: 32rpx;
        font-weight: bold;
        text-align: center;
        margin-bottom: 30rpx;
        color: #333;
      }
      .reason-picker {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 20rpx 30rpx;
        background-color: #f5f5f5;
        border-radius: 10rpx;
        margin-bottom: 30rpx;
        .picker-label {
          font-size: 28rpx;
          color: #666;
        }
        .picker-value {
          flex: 1;
          text-align: right;
          font-size: 28rpx;
          color: #333;
          margin: 0 10rpx;
        }
      }
      .dialog-buttons {
        display: flex;
        gap: 20rpx;
        button {
          flex: 1;
          height: 80rpx;
          border-radius: 10rpx;
          font-size: 30rpx;
          border: none;
          &.cancel-btn {
            background-color: #f0f0f0;
            color: #666;
          }
          &.confirm-btn {
            background-color: #007AFF;
            color: white;
          }
        }
      }
    }
    // 强制完成对话框样式
    .force-complete-dialog {
      width: 600rpx;
      background-color: white;
      border-radius: 20rpx;
      padding: 40rpx;
      .dialog-title {
        font-size: 32rpx;
        font-weight: bold;
        text-align: center;
        margin-bottom: 30rpx;
        color: #333;
      }
      .time-picker-item {
        margin-bottom: 30rpx;
        .time-label {
          font-size: 28rpx;
          color: #333;
          margin-bottom: 15rpx;
          font-weight: 500;
        }
        picker {
          display: inline-block;
          width: 48%;
          &:first-of-type {
            margin-right: 4%;
          }
          .picker-value {
            padding: 20rpx;
            background-color: #f5f5f5;
            border-radius: 10rpx;
            font-size: 26rpx;
            color: #333;
            text-align: center;
          }
        }
      }
      .dialog-buttons {
        display: flex;
        gap: 20rpx;
        margin-top: 40rpx;
        button {
          flex: 1;
          height: 80rpx;
          border-radius: 10rpx;
          font-size: 30rpx;
          border: none;
          &.cancel-btn {
            background-color: #f0f0f0;
            color: #666;
          }
          &.confirm-btn {
            background-color: #5856d6;
            color: white;
          }
        }
      }
    }
  }
</style>