999 lines
31 KiB
Vue
999 lines
31 KiB
Vue
|
<template>
|
|||
|
|
<div class="order-detail-page">
|
|||
|
|
<!-- 导航栏 -->
|
|||
|
|
<van-nav-bar
|
|||
|
|
title="订单详情"
|
|||
|
|
left-arrow
|
|||
|
|
@click-left="goBack"
|
|||
|
|
/>
|
|||
|
|
|
|||
|
|
<van-loading v-if="detailLoading" class="loading-container" size="24px">
|
|||
|
|
加载中...
|
|||
|
|
</van-loading>
|
|||
|
|
|
|||
|
|
<div v-else-if="currentOrderInfo" class="page-content">
|
|||
|
|
<!-- 项目信息标题 -->
|
|||
|
|
<div class="project-header">
|
|||
|
|
<div class="project-title">
|
|||
|
|
{{ currentOrderInfo.projectName }}REV.{{ currentOrderInfo.versionCode }}
|
|||
|
|
</div>
|
|||
|
|
<div class="project-status">
|
|||
|
|
待审批
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- Tab标签页 -->
|
|||
|
|
<van-tabs v-model:active="activeTab" sticky>
|
|||
|
|
<!-- 订单信息 -->
|
|||
|
|
<van-tab title="订单信息" name="order">
|
|||
|
|
<div class="tab-content">
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header">
|
|||
|
|
<span>基本信息</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="card-body">
|
|||
|
|
<div class="info-grid">
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="label">项目名称</span>
|
|||
|
|
<span class="value">{{ currentOrderInfo.projectName || '' }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="label">版本号</span>
|
|||
|
|
<span class="value">{{ currentOrderInfo.versionCode || '' }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="label">项目编号</span>
|
|||
|
|
<span class="value">{{ currentOrderInfo.projectCode || '' }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="label">最终客户</span>
|
|||
|
|
<span class="value">{{ currentOrderInfo.customerName || '' }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="label">BG</span>
|
|||
|
|
<span class="value">{{ currentOrderInfo.bgProperty || '' }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="label">行业</span>
|
|||
|
|
<span class="value">{{ currentOrderInfo.industryType || '' }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="label">代表处</span>
|
|||
|
|
<span class="value">{{ currentOrderInfo.agentName || '' }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="label">进货商接口人</span>
|
|||
|
|
<span class="value">{{ currentOrderInfo.businessPerson || '' }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="label">Email</span>
|
|||
|
|
<span class="value">{{ currentOrderInfo.businessEmail || '' }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="label">联系方式</span>
|
|||
|
|
<span class="value">{{ currentOrderInfo.businessPhone || '' }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="label">合同编号</span>
|
|||
|
|
<span class="value">{{ currentOrderInfo.orderCode || '' }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="label">执行单有效截止时间</span>
|
|||
|
|
<span class="value">{{ currentOrderInfo.orderEndTime? formatDate(currentOrderInfo.orderEndTime, 'YYYY-MM-DD') : '' }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="label">币种</span>
|
|||
|
|
<span class="value">{{ currentOrderInfo.currencyType || '' }}</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="label">总代进货金额</span>
|
|||
|
|
<span class="value">{{ currentOrderInfo.actualPurchaseAmount ? formatAmount(currentOrderInfo.actualPurchaseAmount) : '' }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="label">总代出货金额</span>
|
|||
|
|
<span class="value">{{ currentOrderInfo.shipmentAmount ? formatAmount(currentOrderInfo.shipmentAmount) : '' }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="label">要求到货时间</span>
|
|||
|
|
<span class="value">{{ currentOrderInfo.deliveryTime ? formatDate(currentOrderInfo.deliveryTime) : '' }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="label">公司直发</span>
|
|||
|
|
<span class="value">{{ currentOrderInfo.companyDelivery}}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="info-item">
|
|||
|
|
<span class="label">下单通路</span>
|
|||
|
|
<span class="value">{{ currentOrderInfo.orderChannel}}</span>
|
|||
|
|
</div><div class="info-item">
|
|||
|
|
<span class="label">供货商</span>
|
|||
|
|
<span class="value">{{ currentOrderInfo.supplier}}</span>
|
|||
|
|
</div><div class="info-item">
|
|||
|
|
<span class="label">进货商</span>
|
|||
|
|
<span class="value">{{ currentOrderInfo.partnerName}}</span>
|
|||
|
|
</div><div class="info-item">
|
|||
|
|
<span class="label">进货商类型</span>
|
|||
|
|
<span class="value">{{ currentOrderInfo.level}}</span>
|
|||
|
|
</div><div class="info-item">
|
|||
|
|
<span class="label">进货商联系人</span>
|
|||
|
|
<span class="value">{{ currentOrderInfo.partnerUserName}}</span>
|
|||
|
|
</div><div class="info-item">
|
|||
|
|
<span class="label">Email</span>
|
|||
|
|
<span class="value">{{ currentOrderInfo.partnerEmail}}</span>
|
|||
|
|
</div><div class="info-item">
|
|||
|
|
<span class="label">联系方式</span>
|
|||
|
|
<span class="value">{{ currentOrderInfo.partnerPhone}}</span>
|
|||
|
|
</div><div class="info-item">
|
|||
|
|
<span class="label">收货地址</span>
|
|||
|
|
<span class="value">{{ currentOrderInfo.notifierAddress}}</span>
|
|||
|
|
</div><div class="info-item">
|
|||
|
|
<span class="label">收货人</span>
|
|||
|
|
<span class="value">{{ currentOrderInfo.notifier}}</span>
|
|||
|
|
</div><div class="info-item">
|
|||
|
|
<span class="label">Email</span>
|
|||
|
|
<span class="value">{{ currentOrderInfo.notifierEmail}}</span>
|
|||
|
|
</div><div class="info-item">
|
|||
|
|
<span class="label">联系方式</span>
|
|||
|
|
<span class="value">{{ currentOrderInfo.notifierPhone}}</span>
|
|||
|
|
</div><div class="info-item">
|
|||
|
|
<span class="label">其他特别说明</span>
|
|||
|
|
<span class="value">{{ currentOrderInfo.remark}}</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</van-tab>
|
|||
|
|
|
|||
|
|
<!-- 产品信息 -->
|
|||
|
|
<van-tab title="产品信息" name="product">
|
|||
|
|
<div class="tab-content">
|
|||
|
|
<div v-if="hasProductInfo">
|
|||
|
|
<!-- 软件产品 -->
|
|||
|
|
<div v-if="currentOrderInfo.softwareProjectProductInfoList?.length">
|
|||
|
|
<div v-for="(product, index) in currentOrderInfo.softwareProjectProductInfoList" :key="product.id" class="product-card">
|
|||
|
|
<div class="product-header">
|
|||
|
|
<span class="product-index">{{ index + 1 }}</span>
|
|||
|
|
<div class="product-main-info">
|
|||
|
|
<div class="product-code-price">
|
|||
|
|
<span class="product-code">{{ product.productBomCode }}</span>
|
|||
|
|
<span class="product-total-price">{{ formatAmount(product.allPrice) }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="product-details">
|
|||
|
|
<div class="product-row">
|
|||
|
|
<span class="product-label">产品型号</span>
|
|||
|
|
<span class="product-value">{{ product.model }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="product-row">
|
|||
|
|
<span class="product-label">描述</span>
|
|||
|
|
<span class="product-value">{{ product.productDesc }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="product-row">
|
|||
|
|
<span class="product-label">数量</span>
|
|||
|
|
<span class="product-value">{{ product.quantity }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="product-row">
|
|||
|
|
<span class="product-label">单价</span>
|
|||
|
|
<span class="product-value">{{ formatAmount(product.price) }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 硬件产品 -->
|
|||
|
|
<div v-if="currentOrderInfo.hardwareProjectProductInfoList?.length">
|
|||
|
|
<div v-for="(product, index) in currentOrderInfo.hardwareProjectProductInfoList" :key="product.id" class="product-card">
|
|||
|
|
<div class="product-header">
|
|||
|
|
<span class="product-index">{{ index + 1 + (currentOrderInfo.softwareProjectProductInfoList?.length || 0) }}</span>
|
|||
|
|
<div class="product-main-info">
|
|||
|
|
<div class="product-code-price">
|
|||
|
|
<span class="product-code">{{ product.productBomCode }}</span>
|
|||
|
|
<span class="product-total-price">{{ formatAmount(product.allPrice) }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="product-details">
|
|||
|
|
<div class="product-row">
|
|||
|
|
<span class="product-label">产品型号</span>
|
|||
|
|
<span class="product-value">{{ product.model }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="product-row">
|
|||
|
|
<span class="product-label">描述</span>
|
|||
|
|
<span class="product-value">{{ product.productDesc }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="product-row">
|
|||
|
|
<span class="product-label">数量</span>
|
|||
|
|
<span class="product-value">{{ product.quantity }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="product-row">
|
|||
|
|
<span class="product-label">单价</span>
|
|||
|
|
<span class="product-value">{{ formatAmount(product.price) }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 维保产品 -->
|
|||
|
|
<div v-if="currentOrderInfo.maintenanceProjectProductInfoList?.length">
|
|||
|
|
<div v-for="(product, index) in currentOrderInfo.maintenanceProjectProductInfoList" :key="product.id" class="product-card">
|
|||
|
|
<div class="product-header">
|
|||
|
|
<span class="product-index">{{ index + 1 + (currentOrderInfo.softwareProjectProductInfoList?.length || 0) + (currentOrderInfo.hardwareProjectProductInfoList?.length || 0) }}</span>
|
|||
|
|
<div class="product-main-info">
|
|||
|
|
<div class="product-code-price">
|
|||
|
|
<span class="product-code">{{ product.productBomCode }}</span>
|
|||
|
|
<span class="product-total-price">{{ formatAmount(product.allPrice) }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="product-details">
|
|||
|
|
<div class="product-row">
|
|||
|
|
<span class="product-label">产品型号</span>
|
|||
|
|
<span class="product-value">{{ product.model }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="product-row">
|
|||
|
|
<span class="product-label">描述</span>
|
|||
|
|
<span class="product-value">{{ product.productDesc }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="product-row">
|
|||
|
|
<span class="product-label">数量</span>
|
|||
|
|
<span class="product-value">{{ product.quantity }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="product-row">
|
|||
|
|
<span class="product-label">单价</span>
|
|||
|
|
<span class="product-value">{{ formatAmount(product.price) }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 配置组总计 -->
|
|||
|
|
<div class="product-summary">
|
|||
|
|
<div class="summary-row">
|
|||
|
|
<span class="summary-label">配置组总计</span>
|
|||
|
|
<span class="summary-value">{{ getTotalProductCount() }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="summary-row">
|
|||
|
|
<span class="summary-label">总价</span>
|
|||
|
|
<span class="summary-value total-amount">{{ formatAmount(getTotalAmount()) }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="summary-row">
|
|||
|
|
<span class="summary-label">现金折扣率</span>
|
|||
|
|
<span class="summary-value">{{ getDiscountRate() }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="summary-row final-total">
|
|||
|
|
<span class="summary-label">折后总价</span>
|
|||
|
|
<span class="summary-value final-amount">{{ formatAmount(getFinalTotalAmount()) }}</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 无产品信息时的提示 -->
|
|||
|
|
<div v-else class="empty-state">
|
|||
|
|
<van-empty description="暂无产品信息"/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</van-tab>
|
|||
|
|
|
|||
|
|
<!-- 合同附件 -->
|
|||
|
|
<van-tab title="合同附件" name="attachment">
|
|||
|
|
<div class="tab-content">
|
|||
|
|
<div class="card" v-if="currentOrderInfo.contractFileList?.length">
|
|||
|
|
<div class="card-body">
|
|||
|
|
<div class="file-list">
|
|||
|
|
<div v-for="file in currentOrderInfo.contractFileList" :key="file.id" class="file-item"
|
|||
|
|
@click="previewFile(file)">
|
|||
|
|
<van-icon name="description"/>
|
|||
|
|
<div class="file-info">
|
|||
|
|
<div class="file-name">{{ file.fileName }}</div>
|
|||
|
|
<div class="file-meta">{{ file.uploadUserName }} · {{ formatDate(file.uploadTime) }}</div>
|
|||
|
|
</div>
|
|||
|
|
<van-icon name="arrow"/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 无附件时的提示 -->
|
|||
|
|
<div v-else class="empty-state">
|
|||
|
|
<van-empty description="暂无合同附件"/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</van-tab>
|
|||
|
|
|
|||
|
|
<!-- 审批历史 -->
|
|||
|
|
<van-tab title="审批历史" name="approval">
|
|||
|
|
<div class="tab-content">
|
|||
|
|
<div class="card" v-if="approvalHistory.length">
|
|||
|
|
<div class="card-body">
|
|||
|
|
<van-steps direction="vertical" :active="approvalHistory.length">
|
|||
|
|
<van-step v-for="(record, index) in approvalHistory" :key="record.todoId || index">
|
|||
|
|
<template #inactive-icon>
|
|||
|
|
<van-icon
|
|||
|
|
:name="getStepIcon(record.approveStatus)"
|
|||
|
|
:color="getApprovalStatusColor(record.approveStatus)"
|
|||
|
|
/>
|
|||
|
|
</template>
|
|||
|
|
<template #active-icon>
|
|||
|
|
<van-icon
|
|||
|
|
:name="getStepIcon(record.approveStatus)"
|
|||
|
|
:color="getApprovalStatusColor(record.approveStatus)"
|
|||
|
|
/>
|
|||
|
|
</template>
|
|||
|
|
<div class="approval-item">
|
|||
|
|
<div class="approval-user">提交人：{{ record.approveUserName }}</div>
|
|||
|
|
<div v-if="record.nextAllApproveUserName" class="approval-next-user">
|
|||
|
|
接受人：{{ record.nextAllApproveUserName }}
|
|||
|
|
</div>
|
|||
|
|
<div class="approval-time">{{ formatDate(record.approveTime, 'YYYY-MM-DD HH:mm') }}</div>
|
|||
|
|
<div v-if="record.approveOpinion" class="approval-opinion">
|
|||
|
|
审批意见：{{ record.approveOpinion }}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</van-step>
|
|||
|
|
</van-steps>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 无审批历史时的提示 -->
|
|||
|
|
<div v-else class="empty-state">
|
|||
|
|
<van-empty description="暂无审批历史"/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</van-tab>
|
|||
|
|
</van-tabs>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 审批操作按钮 -->
|
|||
|
|
<div v-if="showApprovalButtons" class="approval-actions">
|
|||
|
|
<van-button
|
|||
|
|
type="default"
|
|||
|
|
size="large"
|
|||
|
|
@click="showApprovalDialog(0)"
|
|||
|
|
:loading="submitting"
|
|||
|
|
>
|
|||
|
|
驳回
|
|||
|
|
</van-button>
|
|||
|
|
<van-button
|
|||
|
|
type="primary"
|
|||
|
|
size="large"
|
|||
|
|
@click="showApprovalDialog(1)"
|
|||
|
|
:loading="submitting"
|
|||
|
|
>
|
|||
|
|
通过
|
|||
|
|
</van-button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 审批意见弹窗 -->
|
|||
|
|
<van-popup
|
|||
|
|
v-model:show="approvalDialogVisible"
|
|||
|
|
position="bottom"
|
|||
|
|
round
|
|||
|
|
:style="{ height: '40%' }"
|
|||
|
|
>
|
|||
|
|
<div class="approval-dialog">
|
|||
|
|
<div class="dialog-header">
|
|||
|
|
<span>审批意见</span>
|
|||
|
|
<van-icon name="cross" @click="approvalDialogVisible = false"/>
|
|||
|
|
</div>
|
|||
|
|
<div class="dialog-body">
|
|||
|
|
<van-field
|
|||
|
|
v-model="approvalOpinion"
|
|||
|
|
type="textarea"
|
|||
|
|
:placeholder="currentApprovalStatus === 0 ? '请输入驳回原因' : '请输入审批意见'"
|
|||
|
|
rows="4"
|
|||
|
|
autosize
|
|||
|
|
maxlength="500"
|
|||
|
|
show-word-limit
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div class="dialog-footer">
|
|||
|
|
<van-button
|
|||
|
|
type="primary"
|
|||
|
|
block
|
|||
|
|
@click="submitApproval"
|
|||
|
|
:loading="submitting"
|
|||
|
|
>
|
|||
|
|
确认{{ currentApprovalStatus === 0 ? '驳回' : '通过' }}
|
|||
|
|
</van-button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</van-popup>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import {ref, computed, onMounted} from 'vue'
|
|||
|
|
import {useRoute, useRouter} from 'vue-router'
|
|||
|
|
import {storeToRefs} from 'pinia'
|
|||
|
|
import {showToast, showSuccessToast} from 'vant'
|
|||
|
|
import {useOrderStore} from '@/store/order'
|
|||
|
|
import {submitApproval as submitApprovalApi} from '@/api/order'
|
|||
|
|
import {
|
|||
|
|
formatOrderStatus,
|
|||
|
|
formatAmount,
|
|||
|
|
formatDate,
|
|||
|
|
formatApprovalStatus,
|
|||
|
|
getApprovalStatusColor,
|
|||
|
|
getFilePreviewUrl
|
|||
|
|
} from '@/utils'
|
|||
|
|
import type {OrderStatus, ApprovalStatus, AttachmentFile} from '@/types'
|
|||
|
|
|
|||
|
|
const route = useRoute()
|
|||
|
|
const router = useRouter()
|
|||
|
|
const orderStore = useOrderStore()
|
|||
|
|
const {currentOrder, currentOrderInfo, approvalHistory, detailLoading} = storeToRefs(orderStore)
|
|||
|
|
|
|||
|
|
// 审批相关
|
|||
|
|
const approvalDialogVisible = ref(false)
|
|||
|
|
const approvalOpinion = ref('')
|
|||
|
|
const currentApprovalStatus = ref<ApprovalStatus>(3)
|
|||
|
|
const submitting = ref(false)
|
|||
|
|
|
|||
|
|
// Tab页签
|
|||
|
|
const activeTab = ref('order')
|
|||
|
|
|
|||
|
|
// 计算属性
|
|||
|
|
const hasProductInfo = computed(() => {
|
|||
|
|
if (!currentOrderInfo.value) return false
|
|||
|
|
return (
|
|||
|
|
currentOrderInfo.value.softwareProjectProductInfoList?.length ||
|
|||
|
|
currentOrderInfo.value.hardwareProjectProductInfoList?.length ||
|
|||
|
|
currentOrderInfo.value.maintenanceProjectProductInfoList?.length
|
|||
|
|
)
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const showApprovalButtons = computed(() => {
|
|||
|
|
// 直接展示审批按钮，无需条件控制
|
|||
|
|
return true
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 获取状态样式类
|
|||
|
|
const getStatusClass = (status: OrderStatus) => {
|
|||
|
|
const classMap = {
|
|||
|
|
'0': 'pending',
|
|||
|
|
'1': 'approved',
|
|||
|
|
'2': 'rejected'
|
|||
|
|
}
|
|||
|
|
return classMap[status] || 'pending'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取步骤图标
|
|||
|
|
const getStepIcon = (status?: ApprovalStatus) => {
|
|||
|
|
if (status === undefined || status === null) return 'clock'
|
|||
|
|
const iconMap = {
|
|||
|
|
1: 'clock',
|
|||
|
|
2: 'close',
|
|||
|
|
3: 'success'
|
|||
|
|
}
|
|||
|
|
return iconMap[status] || 'clock'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 计算产品总数量
|
|||
|
|
const getTotalProductCount = () => {
|
|||
|
|
if (!currentOrderInfo.value) return 0
|
|||
|
|
|
|||
|
|
const softwareCount = currentOrderInfo.value.softwareProjectProductInfoList?.length || 0
|
|||
|
|
const hardwareCount = currentOrderInfo.value.hardwareProjectProductInfoList?.length || 0
|
|||
|
|
const maintenanceCount = currentOrderInfo.value.maintenanceProjectProductInfoList?.length || 0
|
|||
|
|
|
|||
|
|
return softwareCount + hardwareCount + maintenanceCount
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 计算总金额
|
|||
|
|
const getTotalAmount = () => {
|
|||
|
|
if (!currentOrderInfo.value) return 0
|
|||
|
|
|
|||
|
|
let total = 0
|
|||
|
|
|
|||
|
|
// 软件产品总金额
|
|||
|
|
if (currentOrderInfo.value.softwareProjectProductInfoList) {
|
|||
|
|
total += currentOrderInfo.value.softwareProjectProductInfoList.reduce((sum, product) => sum + (product.allPrice || 0), 0)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 硬件产品总金额
|
|||
|
|
if (currentOrderInfo.value.hardwareProjectProductInfoList) {
|
|||
|
|
total += currentOrderInfo.value.hardwareProjectProductInfoList.reduce((sum, product) => sum + (product.allPrice || 0), 0)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 维保产品总金额
|
|||
|
|
if (currentOrderInfo.value.maintenanceProjectProductInfoList) {
|
|||
|
|
total += currentOrderInfo.value.maintenanceProjectProductInfoList.reduce((sum, product) => sum + (product.allPrice || 0), 0)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return total
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取现金折扣率
|
|||
|
|
const getDiscountRate = () => {
|
|||
|
|
if (!currentOrderInfo.value || !currentOrderInfo.value.discountFold) {
|
|||
|
|
return '100%'
|
|||
|
|
}
|
|||
|
|
return (currentOrderInfo.value.discountFold * 100).toFixed(1) + '%'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 计算折后总价
|
|||
|
|
const getFinalTotalAmount = () => {
|
|||
|
|
const totalAmount = getTotalAmount()
|
|||
|
|
const discount = currentOrderInfo.value?.discountFold || 1
|
|||
|
|
return totalAmount * discount
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 返回上一页
|
|||
|
|
const goBack = () => {
|
|||
|
|
router.back()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 预览文件
|
|||
|
|
const previewFile = (file: AttachmentFile) => {
|
|||
|
|
if (!file.filePath) {
|
|||
|
|
showToast('文件路径不存在')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const url = getFilePreviewUrl(file.filePath)
|
|||
|
|
window.open(url, '_blank')
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 显示审批弹窗
|
|||
|
|
const showApprovalDialog = (status: ApprovalStatus) => {
|
|||
|
|
currentApprovalStatus.value = status
|
|||
|
|
approvalOpinion.value = ''
|
|||
|
|
approvalDialogVisible.value = true
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 提交审批
|
|||
|
|
const submitApproval = async () => {
|
|||
|
|
if (!currentOrder.value || !currentOrder.value.todo) {
|
|||
|
|
showToast('审批信息不完整')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const opinion = approvalOpinion.value.trim()
|
|||
|
|
if (currentApprovalStatus.value === 0 && !opinion) {
|
|||
|
|
showToast('请输入驳回原因')
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
submitting.value = true
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
|
|||
|
|
const params = {
|
|||
|
|
...currentOrder.value.todo, // 展开todo中的所有参数
|
|||
|
|
|
|||
|
|
approveOpinion: opinion || undefined , // 添加审批意见
|
|||
|
|
variables:{
|
|||
|
|
approveBtn:currentApprovalStatus.value,
|
|||
|
|
comment:opinion
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
console.log('提交审批参数:', params)
|
|||
|
|
|
|||
|
|
await submitApprovalApi(params)
|
|||
|
|
|
|||
|
|
showSuccessToast(currentApprovalStatus.value === 0 ? '驳回成功' : '审批通过')
|
|||
|
|
approvalDialogVisible.value = false
|
|||
|
|
|
|||
|
|
// 重新加载详情
|
|||
|
|
await orderStore.fetchOrderDetail(route.params.id as string)
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('提交审批失败:', error)
|
|||
|
|
showToast('提交审批失败')
|
|||
|
|
} finally {
|
|||
|
|
submitting.value = false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onMounted(async () => {
|
|||
|
|
const id = route.params.id as string
|
|||
|
|
if (id) {
|
|||
|
|
console.log('详情页面加载，订单ID:', id)
|
|||
|
|
try {
|
|||
|
|
const result = await orderStore.fetchOrderDetail(id)
|
|||
|
|
console.log('获取订单详情结果:', result)
|
|||
|
|
console.log('当前订单信息:', currentOrder.value)
|
|||
|
|
console.log('当前订单基本信息:', currentOrderInfo.value)
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('获取订单详情失败:', error)
|
|||
|
|
showToast('获取订单详情失败')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.order-detail-page {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
background-color: var(--background-color-secondary);
|
|||
|
|
padding-bottom: 80px; // 为底部按钮留出空间
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page-content {
|
|||
|
|
// 移除原来的padding，让tabs组件自己控制间距
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.project-header {
|
|||
|
|
background: var(--background-color-primary);
|
|||
|
|
padding: var(--spacing-lg);
|
|||
|
|
border-bottom: 1px solid var(--divider-color);
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.project-title {
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--text-color-primary);
|
|||
|
|
flex: 1;
|
|||
|
|
word-break: break-all;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.project-status {
|
|||
|
|
background: #FFF7E6;
|
|||
|
|
color: #D48806;
|
|||
|
|
padding: 4px 12px;
|
|||
|
|
border-radius: var(--border-radius-sm);
|
|||
|
|
font-size: 12px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
border: 1px solid #FFD591;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab-content {
|
|||
|
|
padding: var(--spacing-lg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.loading-container {
|
|||
|
|
padding: 60px var(--spacing-lg);
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.empty-state {
|
|||
|
|
padding: 60px var(--spacing-lg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-grid {
|
|||
|
|
display: grid;
|
|||
|
|
gap: var(--spacing-md);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-item {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
|
|||
|
|
.label {
|
|||
|
|
color: var(--text-color-secondary);
|
|||
|
|
font-size: 14px;
|
|||
|
|
min-width: 100px;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.value {
|
|||
|
|
color: var(--text-color-primary);
|
|||
|
|
font-size: 14px;
|
|||
|
|
text-align: right;
|
|||
|
|
word-break: break-all;
|
|||
|
|
|
|||
|
|
&.amount {
|
|||
|
|
color: var(--error-color);
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.product-section {
|
|||
|
|
&:not(:last-child) {
|
|||
|
|
margin-bottom: var(--spacing-lg);
|
|||
|
|
padding-bottom: var(--spacing-lg);
|
|||
|
|
border-bottom: 1px solid var(--divider-color);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-title {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: var(--text-color-primary);
|
|||
|
|
margin-bottom: var(--spacing-md);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.product-item {
|
|||
|
|
background: var(--background-color-tertiary);
|
|||
|
|
padding: var(--spacing-md);
|
|||
|
|
border-radius: var(--border-radius-sm);
|
|||
|
|
margin-bottom: var(--spacing-md);
|
|||
|
|
|
|||
|
|
&:last-child {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.product-name {
|
|||
|
|
font-size: 14px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: var(--text-color-primary);
|
|||
|
|
margin-bottom: var(--spacing-xs);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.product-desc {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: var(--text-color-secondary);
|
|||
|
|
margin-bottom: var(--spacing-sm);
|
|||
|
|
line-height: 1.4;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.product-info {
|
|||
|
|
display: flex;
|
|||
|
|
gap: var(--spacing-md);
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: var(--text-color-tertiary);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.file-list {
|
|||
|
|
.file-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: var(--spacing-md);
|
|||
|
|
background: var(--background-color-tertiary);
|
|||
|
|
border-radius: var(--border-radius-sm);
|
|||
|
|
margin-bottom: var(--spacing-sm);
|
|||
|
|
cursor: pointer;
|
|||
|
|
|
|||
|
|
&:last-child {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&:active {
|
|||
|
|
background: var(--border-color);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.van-icon:first-child {
|
|||
|
|
color: var(--primary-color);
|
|||
|
|
margin-right: var(--spacing-md);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.file-info {
|
|||
|
|
flex: 1;
|
|||
|
|
|
|||
|
|
.file-name {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: var(--text-color-primary);
|
|||
|
|
margin-bottom: var(--spacing-xs);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.file-meta {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: var(--text-color-tertiary);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.van-icon:last-child {
|
|||
|
|
color: var(--text-color-tertiary);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.approval-item {
|
|||
|
|
.approval-user,
|
|||
|
|
.approval-time,
|
|||
|
|
.approval-next-user {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: var(--text-color-secondary);
|
|||
|
|
margin-bottom: var(--spacing-xs);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.approval-next-user {
|
|||
|
|
color: var(--primary-color);
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.approval-opinion {
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: var(--text-color-primary);
|
|||
|
|
background: var(--background-color-tertiary);
|
|||
|
|
padding: var(--spacing-sm);
|
|||
|
|
border-radius: var(--border-radius-sm);
|
|||
|
|
line-height: 1.4;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.approval-actions {
|
|||
|
|
position: fixed;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
padding: var(--spacing-lg);
|
|||
|
|
background: var(--background-color-primary);
|
|||
|
|
border-top: 1px solid var(--divider-color);
|
|||
|
|
display: flex;
|
|||
|
|
gap: var(--spacing-lg);
|
|||
|
|
|
|||
|
|
.van-button {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.approval-dialog {
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
|
|||
|
|
.dialog-header {
|
|||
|
|
padding: var(--spacing-lg);
|
|||
|
|
border-bottom: 1px solid var(--divider-color);
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
|
|||
|
|
.van-icon {
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dialog-body {
|
|||
|
|
flex: 1;
|
|||
|
|
padding: var(--spacing-lg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dialog-footer {
|
|||
|
|
padding: var(--spacing-lg);
|
|||
|
|
border-top: 1px solid var(--divider-color);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.van-steps--vertical) {
|
|||
|
|
padding-left: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:deep(.van-step__content) {
|
|||
|
|
padding-bottom: var(--spacing-lg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 产品相关样式
|
|||
|
|
.product-card {
|
|||
|
|
background: var(--background-color-primary);
|
|||
|
|
border-radius: var(--border-radius-md);
|
|||
|
|
margin-bottom: var(--spacing-md);
|
|||
|
|
overflow: hidden;
|
|||
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|||
|
|
|
|||
|
|
&:last-child {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.product-header {
|
|||
|
|
background: var(--background-color-secondary);
|
|||
|
|
padding: var(--spacing-md);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: var(--spacing-md);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.product-index {
|
|||
|
|
background: var(--primary-color);
|
|||
|
|
color: white;
|
|||
|
|
width: 24px;
|
|||
|
|
height: 24px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
font-size: 12px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.product-main-info {
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.product-code-price {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.product-code {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--text-color-primary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.product-total-price {
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: 700;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.product-details {
|
|||
|
|
padding: var(--spacing-md);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.product-row {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
margin-bottom: var(--spacing-sm);
|
|||
|
|
|
|||
|
|
&:last-child {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.product-label {
|
|||
|
|
color: var(--text-color-secondary);
|
|||
|
|
font-size: 14px;
|
|||
|
|
min-width: 80px;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.product-value {
|
|||
|
|
color: var(--text-color-primary);
|
|||
|
|
font-size: 14px;
|
|||
|
|
text-align: right;
|
|||
|
|
flex: 1;
|
|||
|
|
word-break: break-all;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 产品总计样式
|
|||
|
|
.product-summary {
|
|||
|
|
background: var(--background-color-primary);
|
|||
|
|
border-radius: var(--border-radius-md);
|
|||
|
|
padding: var(--spacing-lg);
|
|||
|
|
margin-top: var(--spacing-lg);
|
|||
|
|
border: 2px solid var(--primary-color);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.summary-row {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: var(--spacing-md);
|
|||
|
|
|
|||
|
|
&:last-child {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.summary-label {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: var(--text-color-primary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.summary-value {
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--text-color-primary);
|
|||
|
|
|
|||
|
|
&.total-amount {
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: 700;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.final-amount {
|
|||
|
|
font-size: 20px;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: var(--primary-color);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.final-total {
|
|||
|
|
border-top: 2px solid var(--divider-color);
|
|||
|
|
padding-top: var(--spacing-md);
|
|||
|
|
margin-top: var(--spacing-md);
|
|||
|
|
|
|||
|
|
.summary-label {
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: var(--primary-color);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|