adspecs 0.1.12

package/references/front-demo/src/views/forecast-order/ForecastOrderDetail.vue

@@ -0,0 +1,732 @@
+<template>
+  <el-drawer
+    :model-value="visible"
+    :title="$t('forecast-order.detail.title')"
+    direction="rtl"
+    size="620px"
+    destroy-on-close
+    @update:model-value="onVisibleChange"
+    @open="onOpen"
+  >
+    <template v-if="store.detailLoading">
+      <el-skeleton :rows="8" animated />
+    </template>
+
+    <template v-else-if="store.detail">
+      <div class="detail-container">
+        <!-- 📋 基本信息卡片 -->
+        <el-card class="info-card" shadow="never">
+          <template #header>
+            <span class="card-title">{{ $t('forecast-order.detail.basicInfo') }}</span>
+          </template>
+          <el-descriptions :column="2" border size="small">
+            <el-descriptions-item :label="$t('forecast-order.detail.forecastOrderNo')">
+              {{ store.detail.forecastOrderNo || $t('forecast-order.listPage.notGenerated') }}
+            </el-descriptions-item>
+            <el-descriptions-item :label="$t('forecast-order.detail.status')">
+              <el-tag :type="statusTagType(store.detail.foStatus)">
+                {{ $t(`forecast-order.status.${store.detail.foStatus}`) }}
+              </el-tag>
+            </el-descriptions-item>
+            <el-descriptions-item :label="$t('forecast-order.detail.forecastOrderType')">
+              {{ store.detail.forecastOrderType || '-' }}
+            </el-descriptions-item>
+            <el-descriptions-item :label="$t('forecast-order.detail.submitter')">
+              {{ store.detail.submitterName || store.detail.submitter || '-' }}
+            </el-descriptions-item>
+            <el-descriptions-item :label="$t('forecast-order.detail.submitTime')">
+              {{ store.detail.submitTime || '-' }}
+            </el-descriptions-item>
+            <el-descriptions-item :label="$t('forecast-order.tradeType')">
+              {{ $t(`forecast-order.enum.tradeType.${store.detail.tradeType}`) }}
+            </el-descriptions-item>
+            <el-descriptions-item :label="$t('forecast-order.form.reasonDesc')" :span="2">
+              {{ store.detail.reasonDesc || '-' }}
+            </el-descriptions-item>
+          </el-descriptions>
+        </el-card>
+
+        <!-- 🏢 客户信息卡片 -->
+        <el-card class="info-card" shadow="never">
+          <template #header>
+            <span class="card-title">{{ $t('forecast-order.detail.customerInfo') }}</span>
+          </template>
+          <el-descriptions :column="2" border size="small">
+            <el-descriptions-item :label="$t('forecast-order.customerCode')">
+              {{ store.detail.customerCode }}
+            </el-descriptions-item>
+            <el-descriptions-item :label="$t('forecast-order.customerName')">
+              {{ store.detail.customerName }}
+            </el-descriptions-item>
+            <el-descriptions-item :label="$t('forecast-order.form.groupCustomerCode')">
+              {{ store.detail.groupCustomerCode || '-' }}
+            </el-descriptions-item>
+            <el-descriptions-item :label="$t('forecast-order.form.groupCustomerName')">
+              {{ store.detail.groupCustomerName || '-' }}
+            </el-descriptions-item>
+          </el-descriptions>
+        </el-card>
+
+        <!-- 📦 物料需求信息卡片 -->
+        <el-card class="info-card" shadow="never">
+          <template #header>
+            <span class="card-title">{{ $t('forecast-order.detail.materialInfo') }}</span>
+          </template>
+          <el-descriptions :column="2" border size="small">
+            <el-descriptions-item :label="$t('forecast-order.productCode')">
+              {{ store.detail.productCode }}
+            </el-descriptions-item>
+            <el-descriptions-item :label="$t('forecast-order.productName')">
+              {{ store.detail.productName }}
+            </el-descriptions-item>
+            <el-descriptions-item :label="$t('forecast-order.productCategory')">
+              {{ store.detail.productCategory || '-' }}
+            </el-descriptions-item>
+            <el-descriptions-item :label="$t('forecast-order.materialLevel')">
+              {{ $t(`forecast-order.enum.materialLevel.${store.detail.materialLevel}`) }}
+            </el-descriptions-item>
+            <el-descriptions-item :label="$t('forecast-order.form.standardization')">
+              {{ $t(`forecast-order.enum.standardization.${store.detail.standardization}`) }}
+            </el-descriptions-item>
+            <el-descriptions-item :label="$t('forecast-order.form.minOrderQty')">
+              {{ store.detail.minOrderQty ?? '-' }}
+            </el-descriptions-item>
+            <el-descriptions-item :label="$t('forecast-order.forecastQty')">
+              <strong>{{ store.detail.forecastQty }}</strong>
+            </el-descriptions-item>
+            <el-descriptions-item :label="$t('forecast-order.unit')">
+              {{ store.detail.unit }}
+            </el-descriptions-item>
+            <el-descriptions-item :label="$t('forecast-order.form.shippingPoint')">
+              {{ $t(`forecast-order.enum.shippingPoint.${store.detail.shippingPoint}`) }}
+            </el-descriptions-item>
+            <el-descriptions-item :label="$t('forecast-order.expectedDeliveryDate')" :span="2">
+              {{ store.detail.expectedDeliveryDate || '-' }}
+            </el-descriptions-item>
+          </el-descriptions>
+        </el-card>
+
+        <!-- 📝 计划评审信息卡片（非草稿/非已提交时可见） -->
+        <el-card
+          v-if="store.detail.foStatus !== 'DRAFT' && store.detail.foStatus !== 'SUBMITTED'"
+          class="info-card"
+          shadow="never"
+        >
+          <template #header>
+            <span class="card-title">{{ $t('forecast-order.detail.reviewInfo') }}</span>
+          </template>
+          <el-descriptions :column="2" border size="small">
+            <el-descriptions-item :label="$t('forecast-order.detail.planSuggestedQty')">
+              {{ store.detail.planSuggestedQty ?? '-' }}
+            </el-descriptions-item>
+            <el-descriptions-item :label="$t('forecast-order.detail.planReplyDate')">
+              {{ store.detail.planReplyDate || '-' }}
+            </el-descriptions-item>
+            <el-descriptions-item :label="$t('forecast-order.detail.planReplyComment')" :span="2">
+              {{ store.detail.planReplyComment || '-' }}
+            </el-descriptions-item>
+          </el-descriptions>
+        </el-card>
+
+        <!-- ❌ 驳回原因（已驳回时红色高亮展示） -->
+        <el-card
+          v-if="store.detail.foStatus === 'REJECTED' && store.detail.rejectReason"
+          class="info-card reject-card"
+          shadow="never"
+        >
+          <template #header>
+            <span class="card-title reject-title">{{ $t('forecast-order.detail.rejectInfo') }}</span>
+          </template>
+          <el-alert
+            type="error"
+            :closable="false"
+            show-icon
+          >
+            {{ store.detail.rejectReason }}
+          </el-alert>
+        </el-card>
+
+        <!-- 🔧 投料信息卡片 -->
+        <el-card class="info-card" shadow="never">
+          <template #header>
+            <span class="card-title">{{ $t('forecast-order.detail.feedingInfo') }}</span>
+          </template>
+          <el-descriptions :column="2" border size="small">
+            <el-descriptions-item :label="$t('forecast-order.form.customsManualNo')">
+              {{ store.detail.customsManualNo || '-' }}
+            </el-descriptions-item>
+            <el-descriptions-item :label="$t('forecast-order.form.rawMaterialOrigin')">
+              {{ store.detail.rawMaterialOrigin || '-' }}
+            </el-descriptions-item>
+            <el-descriptions-item :label="$t('forecast-order.lowCarbonRatio')">
+              {{ store.detail.lowCarbonRatio ?? '-' }}
+            </el-descriptions-item>
+            <el-descriptions-item :label="$t('forecast-order.form.processingFlag')">
+              {{ $t(`forecast-order.enum.processingFlag.${store.detail.processingFlag}`) }}
+            </el-descriptions-item>
+            <el-descriptions-item :label="$t('forecast-order.form.designatedFactory')" :span="2">
+              {{ store.detail.designatedFactory || '-' }}
+            </el-descriptions-item>
+          </el-descriptions>
+        </el-card>
+
+        <!-- 📦 转单信息卡片（排产后展示） -->
+        <el-card
+          v-if="['SCHEDULED', 'PARTIAL_CONVERTED', 'FULL_CONVERTED', 'RELEASED'].includes(store.detail.foStatus)"
+          class="info-card"
+          shadow="never"
+        >
+          <template #header>
+            <span class="card-title">{{ $t('forecast-order.detail.transferInfo') }}</span>
+          </template>
+          <el-descriptions :column="2" border size="small">
+            <el-descriptions-item :label="$t('forecast-order.detail.actualScheduleQty')">
+              {{ store.detail.actualScheduleQty ?? '-' }}
+            </el-descriptions-item>
+            <el-descriptions-item :label="$t('forecast-order.detail.convertedQty')">
+              {{ store.detail.convertedQty ?? 0 }}
+            </el-descriptions-item>
+            <el-descriptions-item :label="$t('forecast-order.detail.releasedQty')">
+              {{ store.detail.releasedQty ?? 0 }}
+            </el-descriptions-item>
+            <el-descriptions-item :label="$t('forecast-order.detail.remainingQty')">
+              <strong class="remaining-highlight">
+                {{ (store.detail.actualScheduleQty || 0) - (store.detail.convertedQty || 0) - (store.detail.releasedQty || 0) }}
+              </strong>
+            </el-descriptions-item>
+            <el-descriptions-item :label="$t('forecast-order.detail.relatedSoNos')" :span="2">
+              {{ store.detail.relatedSoNos || '-' }}
+            </el-descriptions-item>
+            <el-descriptions-item :label="$t('forecast-order.detail.forceConvertDeadline')" :span="2">
+              {{ store.detail.forceConvertDeadline || '-' }}
+            </el-descriptions-item>
+          </el-descriptions>
+        </el-card>
+
+        <!-- 🔄 变更记录子表 -->
+        <el-card class="info-card" shadow="never">
+          <template #header>
+            <div class="card-header-with-action">
+              <span class="card-title">{{ $t('forecast-order.detail.changeHistory') }}</span>
+              <el-tag v-if="store.hasPendingChange" type="warning" size="small">
+                {{ $t('forecast-order.listPage.pendingBadge') }}
+              </el-tag>
+            </div>
+          </template>
+          <el-table
+            :data="store.changeList"
+            border
+            size="small"
+            v-loading="store.changeListLoading"
+            :empty-text="$t('forecast-order.common.empty')"
+          >
+            <el-table-column :label="$t('forecast-order.detail.changeOrderNo')" prop="changeOrderNo" width="140">
+              <template #default="{ row }">
+                {{ row.changeOrderNo || '-' }}
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('forecast-order.detail.changeStatus')" prop="coStatus" width="100">
+              <template #default="{ row }">
+                <el-tag :type="changeStatusTagType(row.coStatus)" size="small">
+                  {{ $t(`forecast-order.status.CHANGE_${row.coStatus}`) }}
+                </el-tag>
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('forecast-order.detail.changeSummary')" prop="newCustomerName" min-width="150">
+              <template #default="{ row }">
+                <span v-if="row.newCustomerName">{{ $t('forecast-order.change.newCustomer') }}: {{ row.newCustomerName }}</span>
+                <span v-else-if="row.newDeliveryDate">{{ $t('forecast-order.change.newDeliveryDate') }}: {{ row.newDeliveryDate }}</span>
+                <span v-else-if="row.newCustomsManualNo">{{ $t('forecast-order.change.newCustomsManualNo') }}: {{ row.newCustomsManualNo }}</span>
+                <span v-else-if="row.releaseQty != null">{{ $t('forecast-order.change.releaseQty') }}: {{ row.releaseQty }}</span>
+                <span v-else>-</span>
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('forecast-order.detail.applicant')" prop="submitter" width="80">
+              <template #default="{ row }">
+                {{ row.submitterName || row.submitter || '-' }}
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('forecast-order.detail.applyTime')" prop="submitTime" width="160">
+              <template #default="{ row }">
+                {{ row.submitTime || row.creationDate || '-' }}
+              </template>
+            </el-table-column>
+          </el-table>
+        </el-card>
+
+        <!-- 排产进度（APS Hook） -->
+        <el-card v-if="apsSchedule.scheduleData" class="info-card" shadow="never">
+          <template #header>
+            <span class="card-title">APS 排产进度</span>
+          </template>
+          <el-descriptions :column="1" border size="small">
+            <el-descriptions-item label="状态">
+              {{ apsSchedule.scheduleData.scheduleStatus }}
+            </el-descriptions-item>
+            <el-descriptions-item label="进度">
+              {{ apsSchedule.scheduleData.scheduleProgress }}%
+            </el-descriptions-item>
+          </el-descriptions>
+        </el-card>
+        <el-alert
+          v-if="apsSchedule.timeout"
+          type="warning"
+          :closable="false"
+          show-icon
+          class="aps-timeout-alert"
+        >
+          排产进度暂不可用
+          <el-button type="primary" link size="small" @click="onRetryAps">重试</el-button>
+        </el-alert>
+      </div>
+    </template>
+
+    <!-- 底部操作按钮区 -->
+    <template v-if="store.detail" #footer>
+      <div class="drawer-footer">
+        <el-button
+          v-if="store.visibleButtons.includes('edit')"
+          type="primary"
+          size="small"
+          @click="onEdit"
+        >
+          {{ $t('forecast-order.action.edit') }}
+        </el-button>
+        <el-button
+          v-if="store.visibleButtons.includes('submit')"
+          type="success"
+          size="small"
+          @click="onSubmit"
+        >
+          {{ $t('forecast-order.submit') }}
+        </el-button>
+        <el-button
+          v-if="store.visibleButtons.includes('delete')"
+          type="danger"
+          size="small"
+          @click="onDelete"
+        >
+          {{ $t('forecast-order.action.delete') }}
+        </el-button>
+        <el-button
+          v-if="store.visibleButtons.includes('withdraw')"
+          size="small"
+          @click="onWithdraw"
+        >
+          {{ $t('forecast-order.action.withdraw') }}
+        </el-button>
+        <el-button
+          v-if="store.visibleButtons.includes('resubmit')"
+          type="primary"
+          size="small"
+          @click="onResubmit"
+        >
+          {{ $t('forecast-order.action.resubmit') }}
+        </el-button>
+        <el-button
+          v-if="store.visibleButtons.includes('discard')"
+          type="danger"
+          size="small"
+          @click="onDiscard"
+        >
+          {{ $t('forecast-order.action.discard') }}
+        </el-button>
+        <el-button
+          v-if="store.visibleButtons.includes('change')"
+          type="warning"
+          size="small"
+          @click="onChange"
+        >
+          {{ $t('forecast-order.action.submitChange') }}
+        </el-button>
+        <el-button
+          v-if="store.visibleButtons.includes('convert')"
+          type="success"
+          size="small"
+          @click="onConvert"
+        >
+          {{ $t('forecast-order.action.convertToOrder') }}
+        </el-button>
+        <el-button
+          v-if="store.visibleButtons.includes('reviewAccept')"
+          type="primary"
+          size="small"
+          @click="onReviewAccept"
+        >
+          {{ $t('forecast-order.action.reviewAccept') }}
+        </el-button>
+        <el-button
+          v-if="store.visibleButtons.includes('reviewReject')"
+          type="danger"
+          size="small"
+          @click="onReviewReject"
+        >
+          {{ $t('forecast-order.action.reviewReject') }}
+        </el-button>
+        <el-button
+          v-if="store.visibleButtons.includes('viewChangeHistory')"
+          size="small"
+          @click="onViewHistory"
+        >
+          变更历史
+        </el-button>
+        <el-button
+          v-if="store.visibleButtons.includes('approve-change')"
+          type="warning"
+          size="small"
+          @click="onOpenApproveDialog"
+        >
+          {{ $t('forecast-order.action.approve') }}
+        </el-button>
+      </div>
+    </template>
+  </el-drawer>
+
+  <!-- 内嵌评审对话框 -->
+  <ReplyDialog
+    :visible="replyDialogVisible"
+    :mode="replyMode"
+    :forecast-order-id="store.detailFcId || 0"
+    @update:visible="onReplyVisibleChange"
+    @success="onReplySuccess"
+  />
+
+  <!-- 转FO确认弹窗 -->
+  <TransferFoDialog
+    :visible="transferDialogVisible"
+    :forecast-order="store.detail"
+    @update:visible="transferDialogVisible = $event"
+    @confirm="onTransferConfirm"
+  />
+
+  <!-- 变更审批弹窗 -->
+  <ApproveChangeDialog
+    :visible="approveChangeDialogVisible"
+    :change-order="approveTargetChange"
+    @update:visible="approveChangeDialogVisible = $event"
+    @approve="onApproveChange"
+    @reject="onRejectChange"
+  />
+
+  <!-- 变更单编辑弹窗 -->
+  <ChangeOrderEdit
+    :visible="changeEditVisible"
+    :forecast-order-id="store.detailFcId || 0"
+    @update:visible="changeEditVisible = $event"
+    @success="onChangeSuccess"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref, computed, onUnmounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { useForecastOrderDetailStore } from '@/store/modules/forecast-order/forecastOrderDetailStore'
+import { useApsSchedule } from '@/hooks/useApsSchedule'
+import { deleteDraft, approveChange, rejectChange } from '@/api/forecast/forecast-order'
+import { reqIsSucceed } from '@/utils'
+import type { ForecastChangeOrder } from '@/types/forecast-order'
+
+import ReplyDialog, { type ReplyFormData } from './components/ReplyDialog.vue'
+import TransferFoDialog from './components/TransferFoDialog.vue'
+import ApproveChangeDialog from './components/ApproveChangeDialog.vue'
+import ChangeOrderEdit from './ChangeOrderEdit.vue'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  visible: boolean
+  forecastOrderId: number
+}>()
+
+const emit = defineEmits<{
+  'update:visible': [value: boolean]
+  edit: [forecastOrderId: number]
+  refresh: []
+}>()
+
+const store = useForecastOrderDetailStore()
+const apsSchedule = useApsSchedule()
+
+// Dialog visibility refs
+const replyDialogVisible = ref(false)
+const replyMode = ref<'accept' | 'reject'>('accept')
+const transferDialogVisible = ref(false)
+const approveChangeDialogVisible = ref(false)
+const approveTargetChange = ref<ForecastChangeOrder | null>(null)
+const changeEditVisible = ref(false)
+
+// Status tag color mapping
+function statusTagType(status: string) {
+  const map: Record<string, string> = {
+    DRAFT: 'info',
+    SUBMITTED: 'warning',
+    REJECTED: 'danger',
+    PLAN_RECEIVED: 'primary',
+    SCHEDULED: 'success',
+    PARTIAL_CONVERTED: '',
+    FULL_CONVERTED: 'success',
+    RELEASED: 'info',
+    DISCARDED: 'danger',
+  }
+  return map[status] || 'info'
+}
+
+function changeStatusTagType(status: string) {
+  const map: Record<string, string> = {
+    DRAFT: 'info',
+    SUBMITTED: 'warning',
+    CHANGED: 'success',
+    REJECTED: 'danger',
+    DISCARDED: 'info',
+  }
+  return map[status] || 'info'
+}
+
+// ==================== Drawer Lifecycle ====================
+async function onOpen() {
+  await store.openDrawer(props.forecastOrderId)
+  await store.fetchChangeList(props.forecastOrderId)
+  apsSchedule.fetchSchedule(props.forecastOrderId).catch(() => {})
+}
+
+function onVisibleChange(val: boolean) {
+  if (!val) {
+    store.closeDrawer()
+  }
+  emit('update:visible', val)
+}
+
+// ==================== Action Handlers ====================
+function onEdit() {
+  if (store.detail) {
+    emit('edit', store.detail.forecastOrderId)
+  }
+}
+
+async function onSubmit() {
+  // 提交逻辑由form store处理
+  ElMessage.info('提交功能由表单Store处理')
+}
+
+async function onDelete() {
+  if (!store.detail?.forecastOrderId) return
+  try {
+    await ElMessageBox.confirm(
+      t('forecast-order.confirm.delete'),
+      t('forecast-order.confirm.tip'),
+      { type: 'warning' },
+    )
+    const res = await deleteDraft(store.detail.forecastOrderId)
+    if (reqIsSucceed(res)) {
+      ElMessage.success(t('forecast-order.toast.deleteSuccess'))
+      store.closeDrawer()
+      emit('update:visible', false)
+      emit('refresh')
+    }
+  } catch {
+    // 取消
+  }
+}
+
+async function onWithdraw() {
+  try {
+    await ElMessageBox.confirm(
+      t('forecast-order.confirm.withdraw'),
+      t('forecast-order.confirm.tip'),
+      { type: 'warning' },
+    )
+    await store.withdraw()
+  } catch {
+    // 取消
+  }
+}
+
+async function onResubmit() {
+  try {
+    await ElMessageBox.confirm(
+      t('forecast-order.confirm.resubmit'),
+      t('forecast-order.confirm.tip'),
+      { type: 'warning' },
+    )
+    await store.doResubmit()
+  } catch {
+    // 取消
+  }
+}
+
+async function onDiscard() {
+  try {
+    await ElMessageBox.confirm(
+      t('forecast-order.confirm.discard'),
+      t('forecast-order.confirm.tip'),
+      { type: 'warning' },
+    )
+    await store.doDiscard()
+    emit('update:visible', false)
+  } catch {
+    // 取消
+  }
+}
+
+function onChange() {
+  changeEditVisible.value = true
+}
+
+function onConvert() {
+  transferDialogVisible.value = true
+}
+
+function onReviewAccept() {
+  replyMode.value = 'accept'
+  replyDialogVisible.value = true
+}
+
+function onReviewReject() {
+  replyMode.value = 'reject'
+  replyDialogVisible.value = true
+}
+
+function onViewHistory() {
+  // 滚动到变更记录区
+}
+
+function onOpenApproveDialog() {
+  // 找到待审批的变更单（SUBMITTED 状态优先，其次 DRAFT）
+  const pending = store.changeList.find(
+    (c) => c.coStatus === 'SUBMITTED' || c.coStatus === 'DRAFT'
+  )
+  if (pending) {
+    approveTargetChange.value = pending
+    approveChangeDialogVisible.value = true
+  }
+}
+
+// ==================== Reply Dialog ====================
+function onReplyVisibleChange(val: boolean) {
+  replyDialogVisible.value = val
+}
+
+async function onReplySuccess(data: ReplyFormData) {
+  replyDialogVisible.value = false
+  if (!store.detailFcId) return
+
+  if (replyMode.value === 'accept') {
+    await store.doReviewAccept({
+      forecastOrderId: store.detailFcId,
+      planSuggestedQty: data.planSuggestedQty ?? 0,
+      planReplyDate: data.planReplyDate,
+      planReplyComment: data.planReplyComment,
+    })
+  } else {
+    await store.doReviewReject({
+      forecastOrderId: store.detailFcId,
+      rejectReason: data.rejectReason,
+    })
+  }
+  emit('refresh')
+}
+
+// ==================== Transfer ====================
+function onTransferConfirm() {
+  emit('refresh')
+}
+
+// ==================== Change Order ====================
+function onChangeSuccess() {
+  store.fetchChangeList(props.forecastOrderId)
+  emit('refresh')
+}
+
+async function onApproveChange(changeOrderId: number, _comment?: string) {
+  try {
+    const res = await approveChange(changeOrderId)
+    if (reqIsSucceed(res)) {
+      ElMessage.success(t('forecast-order.toast.approveSuccess'))
+    }
+  } catch (error: unknown) {
+    const err = error as { code?: string; message?: string }
+    ElMessage.error(err?.message || t('forecast-order.error.unknownError'))
+  } finally {
+    approveChangeDialogVisible.value = false
+    store.fetchChangeList(props.forecastOrderId)
+  }
+}
+
+async function onRejectChange(changeOrderId: number, comment?: string) {
+  try {
+    const res = await rejectChange({ params: { changeOrderId, rejectReason: comment } })
+    if (reqIsSucceed(res)) {
+      ElMessage.success(t('forecast-order.toast.rejectSuccess'))
+    }
+  } catch (error: unknown) {
+    const err = error as { code?: string; message?: string }
+    ElMessage.error(err?.message || t('forecast-order.error.unknownError'))
+  } finally {
+    approveChangeDialogVisible.value = false
+    store.fetchChangeList(props.forecastOrderId)
+  }
+}
+
+function onRetryAps() {
+  apsSchedule.retry(props.forecastOrderId)
+}
+</script>
+
+<style scoped lang="scss">
+.detail-container {
+  padding-bottom: 60px;
+}
+
+.info-card {
+  margin-bottom: 12px;
+
+  :deep(.el-card__header) {
+    padding: 10px 16px;
+  }
+
+  :deep(.el-card__body) {
+    padding: 12px 16px;
+  }
+}
+
+.card-title {
+  font-weight: 600;
+  font-size: 14px;
+  color: #303133;
+}
+
+.card-header-with-action {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.reject-card {
+  :deep(.el-card__header) {
+    background: #fef0f0;
+  }
+}
+
+.reject-title {
+  color: #f56c6c;
+}
+
+.remaining-highlight {
+  color: #e6a23c;
+  font-size: 16px;
+}
+
+.drawer-footer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  justify-content: flex-start;
+  padding: 4px 0;
+}
+
+.aps-timeout-alert {
+  margin-top: 8px;
+}
+</style>