<!--
|
差旅/费用报销详情页
|
-->
|
<template>
|
<view class="oa-detail-page reimburse-detail-page">
|
<PageHeader :title="pageTitle"
|
@back="goBack" />
|
|
<view v-if="loading"
|
class="rd-loading-wrap">
|
<up-loading-icon mode="circle" />
|
<text class="rd-loading-text">加载中...</text>
|
</view>
|
|
<scroll-view v-else-if="reimburseRow"
|
class="oa-detail-scroll reimburse-detail-scroll"
|
scroll-y
|
:show-scrollbar="false">
|
<ReimburseInstanceDetailBody :reimburse-row="reimburseRow"
|
:module-key="moduleKey" />
|
</scroll-view>
|
|
<view v-else
|
class="oa-empty">
|
<up-empty mode="data"
|
text="未获取到报销数据" />
|
</view>
|
|
<view v-if="reimburseRow && canEdit"
|
class="oa-page-footer">
|
<text class="oa-footer-btn btn-default"
|
@click="goBack">返回</text>
|
<text class="oa-footer-btn btn-primary"
|
@click="goEdit">修改</text>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { computed, ref } from "vue";
|
import { onLoad } from "@dcloudio/uni-app";
|
import PageHeader from "@/components/PageHeader.vue";
|
import ReimburseInstanceDetailBody from "../_components/ReimburseInstanceDetailBody.vue";
|
import { OA_NAV } from "@/config/oaPaths.js";
|
import { getApprovalModuleConfig } from "../../_utils/approvalModuleRegistry.js";
|
import {
|
canEditReimbursementRow,
|
fetchFinReimbursementListItemDetail,
|
resolveReimbursementDeleteId,
|
} from "../../_utils/finReimbursementMappers.js";
|
|
const moduleKey = ref("");
|
const reimbursementId = ref("");
|
const reimburseRow = ref(null);
|
const loading = ref(false);
|
|
const pageTitle = computed(
|
() => `${getApprovalModuleConfig(moduleKey.value)?.label || "报销"}详情`
|
);
|
|
const canEdit = computed(() =>
|
reimburseRow.value ? canEditReimbursementRow(reimburseRow.value) : false
|
);
|
|
const goBack = () => uni.navigateBack();
|
|
const goEdit = () => {
|
const rid = resolveReimbursementDeleteId(reimburseRow.value);
|
if (rid == null) {
|
uni.showToast({ title: "无法修改", icon: "none" });
|
return;
|
}
|
uni.navigateTo({
|
url: `${OA_NAV.reimburseForm}?moduleKey=${moduleKey.value}&mode=edit&reimbursementId=${rid}`,
|
});
|
};
|
|
onLoad(async options => {
|
moduleKey.value = options?.moduleKey || "";
|
reimbursementId.value = options?.reimbursementId || "";
|
if (!moduleKey.value || !reimbursementId.value) {
|
uni.showToast({ title: "参数不完整", icon: "none" });
|
setTimeout(goBack, 500);
|
return;
|
}
|
loading.value = true;
|
try {
|
reimburseRow.value = await fetchFinReimbursementListItemDetail(
|
{ reimbursementId: reimbursementId.value },
|
moduleKey.value
|
);
|
if (reimburseRow.value?.moduleKey) {
|
moduleKey.value = reimburseRow.value.moduleKey;
|
}
|
} catch {
|
uni.showToast({ title: "加载详情失败", icon: "none" });
|
} finally {
|
loading.value = false;
|
}
|
});
|
</script>
|
|
<style scoped lang="scss">
|
@import "../../_styles/oa-approval-list.scss";
|
@import "./reimburse-detail.scss";
|
|
.rd-loading-wrap {
|
flex: 1;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
padding: 80px 0;
|
}
|
.rd-loading-text {
|
margin-top: 12px;
|
font-size: 14px;
|
color: #909399;
|
}
|
</style>
|
