302 lines
9.3 KiB
Vue
302 lines
9.3 KiB
Vue
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
import { onLoad, onShow } from '@dcloudio/uni-app'
|
|
import {
|
|
getFreight,
|
|
getFreightApprovalFlow,
|
|
processFreightApproval,
|
|
submitFreightApproval
|
|
} from '@/api/pl'
|
|
import { fetchUserOptions } from '@/api/admin'
|
|
import {
|
|
dash,
|
|
formatMoney,
|
|
settlementStatusLabel,
|
|
isEditableDraftSettlement
|
|
} from '@/utils/plLabels'
|
|
import { PAGE_PATHS } from '@/config/api'
|
|
import MpApproverPicker from '@/components/mp-approver-picker/mp-approver-picker.vue'
|
|
|
|
const id = ref('')
|
|
const detail = ref(null)
|
|
const flow = ref([])
|
|
const acting = ref(false)
|
|
|
|
const pickerVisible = ref(false)
|
|
const approverIds = ref([])
|
|
const userMap = ref({})
|
|
const approvalType = ref('or')
|
|
const remark = ref('')
|
|
|
|
const approvalTypes = [
|
|
{ value: 'or', label: '或签（任一人）' },
|
|
{ value: 'sequential', label: '顺序审批' },
|
|
{ value: 'parallel', label: '会签（全员）' }
|
|
]
|
|
|
|
const status = computed(() => settlementStatusLabel(detail.value?.settlementStatus))
|
|
const canApprove = computed(() => !!detail.value?.canApprove && detail.value?.currentApprovalId)
|
|
const canSubmit = computed(() => isEditableDraftSettlement(detail.value?.settlementStatus))
|
|
const plans = computed(() =>
|
|
Array.isArray(detail.value?.plans) ? detail.value.plans : []
|
|
)
|
|
const transports = computed(() =>
|
|
Array.isArray(detail.value?.transports) ? detail.value.transports : []
|
|
)
|
|
|
|
const approvalTypeIndex = computed(() =>
|
|
Math.max(
|
|
0,
|
|
approvalTypes.findIndex((t) => t.value === approvalType.value)
|
|
)
|
|
)
|
|
|
|
const approverSummary = computed(() => {
|
|
if (!approverIds.value.length) return '点击选择审批人'
|
|
return approverIds.value
|
|
.map((uid) => {
|
|
const u = userMap.value[uid]
|
|
return u ? u.nickName || u.userNo || uid : uid
|
|
})
|
|
.join('、')
|
|
})
|
|
|
|
const goBack = () => {
|
|
uni.navigateBack({
|
|
fail: () => uni.navigateTo({ url: PAGE_PATHS.plFreightList })
|
|
})
|
|
}
|
|
|
|
const preloadUsers = async () => {
|
|
try {
|
|
const list = await fetchUserOptions()
|
|
const map = {}
|
|
list.forEach((u) => {
|
|
map[u.userId] = u
|
|
})
|
|
userMap.value = map
|
|
} catch {
|
|
/* 选人弹层内会再拉 */
|
|
}
|
|
}
|
|
|
|
const load = async () => {
|
|
if (!id.value) return
|
|
try {
|
|
detail.value = await getFreight(id.value)
|
|
try {
|
|
flow.value = await getFreightApprovalFlow(id.value)
|
|
} catch {
|
|
flow.value = detail.value?.approvalFlow || detail.value?.approvalHistory || []
|
|
}
|
|
} catch (e) {
|
|
uni.showToast({ title: e.message || '加载失败', icon: 'none' })
|
|
}
|
|
}
|
|
|
|
const openPicker = () => {
|
|
pickerVisible.value = true
|
|
}
|
|
|
|
const onApproverConfirm = (ids) => {
|
|
approverIds.value = ids
|
|
// 同步 map（弹层内可能已加载）
|
|
preloadUsers()
|
|
}
|
|
|
|
const onApprovalTypeChange = (e) => {
|
|
const idx = Number(e.detail.value)
|
|
approvalType.value = approvalTypes[idx]?.value || 'or'
|
|
}
|
|
|
|
const onSubmitApproval = () => {
|
|
if (!approverIds.value.length) {
|
|
uni.showToast({ title: '请选择审批人', icon: 'none' })
|
|
openPicker()
|
|
return
|
|
}
|
|
const names = approverSummary.value
|
|
uni.showModal({
|
|
title: '提交审批',
|
|
content: `审批类型：${approvalTypes[approvalTypeIndex.value].label}\n审批人：${names}`,
|
|
success: async (r) => {
|
|
if (!r.confirm) return
|
|
acting.value = true
|
|
try {
|
|
await submitFreightApproval(id.value, {
|
|
approvalType: approvalType.value,
|
|
approverIds: approverIds.value.map(String),
|
|
remark: remark.value.trim() || undefined
|
|
})
|
|
uni.showToast({ title: '已提交', icon: 'success' })
|
|
approverIds.value = []
|
|
remark.value = ''
|
|
load()
|
|
} catch (e) {
|
|
uni.showToast({ title: e.message || '提交失败', icon: 'none' })
|
|
} finally {
|
|
acting.value = false
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
const doApprove = (pass) => {
|
|
const approvalId = detail.value?.currentApprovalId
|
|
if (!approvalId) {
|
|
uni.showToast({ title: '无待审节点', icon: 'none' })
|
|
return
|
|
}
|
|
uni.showModal({
|
|
title: pass ? '审批通过' : '审批驳回',
|
|
editable: true,
|
|
placeholderText: '审批意见（可选）',
|
|
success: async (r) => {
|
|
if (!r.confirm) return
|
|
acting.value = true
|
|
try {
|
|
await processFreightApproval(approvalId, {
|
|
action: pass ? 'approve' : 'reject',
|
|
comment: r.content || undefined
|
|
})
|
|
uni.showToast({ title: pass ? '已通过' : '已驳回', icon: 'success' })
|
|
load()
|
|
} catch (e) {
|
|
uni.showToast({ title: e.message || '操作失败', icon: 'none' })
|
|
} finally {
|
|
acting.value = false
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
onLoad((q) => {
|
|
id.value = q?.id || ''
|
|
})
|
|
onShow(() => {
|
|
load()
|
|
preloadUsers()
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<view class="mp-page mp-page--sub mp-page--with-bottom">
|
|
<view class="mp-header mp-header--pl">
|
|
<text class="mp-subpage-back" @click="goBack">← 返回</text>
|
|
<text class="mp-header__title" style="margin-top: 16rpx">运费结算详情</text>
|
|
</view>
|
|
|
|
<view v-if="detail" class="mp-detail-hero">
|
|
<view class="mp-detail-hero__top">
|
|
<view>
|
|
<text class="mp-detail-hero__title">{{ dash(detail.settlementNo) }}</text>
|
|
<text class="mp-detail-hero__sub">{{ dash(detail.licensePlateSummary) }}</text>
|
|
</view>
|
|
<text class="mp-tag" :class="'mp-tag--' + status.tag">{{ status.text }}</text>
|
|
</view>
|
|
<view class="mp-detail-hero__meta">
|
|
<text class="mp-detail-hero__chip">{{ formatMoney(detail.totalFreight) }}</text>
|
|
<text v-if="detail.currentApproverName" class="mp-detail-hero__chip">
|
|
审批人 {{ detail.currentApproverName }}
|
|
</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="mp-block">
|
|
<text class="mp-block__title">结算信息</text>
|
|
<view class="mp-block__panel">
|
|
<view class="mp-kv"><text class="mp-kv__label">发票号</text><text class="mp-kv__value">{{ dash(detail?.invoiceNo) }}</text></view>
|
|
<view class="mp-kv"><text class="mp-kv__label">发票金额</text><text class="mp-kv__value">{{ formatMoney(detail?.invoiceAmount) }}</text></view>
|
|
<view class="mp-kv"><text class="mp-kv__label">提交人</text><text class="mp-kv__value">{{ dash(detail?.submitterName) }}</text></view>
|
|
<view class="mp-kv"><text class="mp-kv__label">备注</text><text class="mp-kv__value">{{ dash(detail?.remark) }}</text></view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="plans.length" class="mp-block">
|
|
<text class="mp-block__title">关联计划</text>
|
|
<view class="mp-block__panel">
|
|
<view v-for="p in plans" :key="p.id || p.planId" class="mp-kv">
|
|
<text class="mp-kv__label">{{ dash(p.planNo) }}</text>
|
|
<text class="mp-kv__value">{{ formatMoney(p.freightAmount) }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="transports.length" class="mp-block">
|
|
<text class="mp-block__title">关联运输</text>
|
|
<view class="mp-block__panel">
|
|
<view v-for="t in transports" :key="t.id" class="mp-kv">
|
|
<text class="mp-kv__label">{{ dash(t.licensePlate || t.transportNo) }}</text>
|
|
<text class="mp-kv__value">{{ formatMoney(t.freightAmount) }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="flow.length" class="mp-block">
|
|
<text class="mp-block__title">审批流</text>
|
|
<view class="mp-block__panel">
|
|
<view v-for="(n, i) in flow" :key="n.id || i" class="mp-kv">
|
|
<text class="mp-kv__label">{{ dash(n.stepName || n.approverName || `步骤${n.step}`) }}</text>
|
|
<text class="mp-kv__value">{{ dash(n.approvalResult) }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="canSubmit" class="mp-block">
|
|
<text class="mp-block__title">提交审批</text>
|
|
<view class="mp-form">
|
|
<view class="mp-form-item">
|
|
<text class="mp-form-label">审批类型</text>
|
|
<picker
|
|
:range="approvalTypes.map((t) => t.label)"
|
|
:value="approvalTypeIndex"
|
|
@change="onApprovalTypeChange"
|
|
>
|
|
<view class="mp-form-picker">{{ approvalTypes[approvalTypeIndex].label }}</view>
|
|
</picker>
|
|
</view>
|
|
<view class="mp-form-item" @click="openPicker">
|
|
<text class="mp-form-label">审批人</text>
|
|
<view class="mp-form-picker mp-form-picker--link">
|
|
{{ approverSummary }}
|
|
</view>
|
|
</view>
|
|
<view class="mp-form-item">
|
|
<text class="mp-form-label">提交说明</text>
|
|
<textarea
|
|
v-model="remark"
|
|
class="mp-form-textarea"
|
|
placeholder="可选"
|
|
maxlength="500"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="canSubmit || canApprove" class="mp-bottom-bar">
|
|
<button
|
|
v-if="canSubmit"
|
|
class="mp-btn mp-btn--primary mp-btn--block"
|
|
:disabled="acting"
|
|
@click="onSubmitApproval"
|
|
>
|
|
提交审批
|
|
</button>
|
|
<view v-if="canApprove" style="display: flex; gap: 16rpx; width: 100%">
|
|
<button class="mp-btn mp-btn--ghost" style="flex: 1" :disabled="acting" @click="doApprove(false)">
|
|
驳回
|
|
</button>
|
|
<button class="mp-btn mp-btn--primary" style="flex: 1" :disabled="acting" @click="doApprove(true)">
|
|
通过
|
|
</button>
|
|
</view>
|
|
</view>
|
|
|
|
<MpApproverPicker
|
|
v-model="approverIds"
|
|
v-model:visible="pickerVisible"
|
|
@confirm="onApproverConfirm"
|
|
/>
|
|
</view>
|
|
</template>
|