Step F9：费用管理（Finance）前端
This commit is contained in:
Cheng Zhou
@@ -0,0 +1,64 @@
|
||||
import { apiGet, apiPatch, apiPost } from "./axios";
|
||||
import type { AxiosResponse } from "axios";
|
||||
import type { ApiListResponse } from "../types/api";
|
||||
|
||||
export interface FinanceItem {
|
||||
id: string;
|
||||
study_id: string;
|
||||
site_id?: string | null;
|
||||
subject_id?: string | null;
|
||||
visit_id?: string | null;
|
||||
category: string;
|
||||
title: string;
|
||||
description?: string | null;
|
||||
currency: string;
|
||||
amount: number | string;
|
||||
occur_date: string;
|
||||
status: string;
|
||||
submitted_at?: string | null;
|
||||
approved_at?: string | null;
|
||||
rejected_at?: string | null;
|
||||
paid_at?: string | null;
|
||||
approver_id?: string | null;
|
||||
payer_id?: string | null;
|
||||
reject_reason?: string | null;
|
||||
created_by: string;
|
||||
created_at: string;
|
||||
updated_at?: string | null;
|
||||
}
|
||||
|
||||
export interface FinanceSummary {
|
||||
total_amount: number | string;
|
||||
approved_amount: number | string;
|
||||
paid_amount: number | string;
|
||||
submitted_amount?: number | string;
|
||||
count_total: number;
|
||||
count_paid: number;
|
||||
}
|
||||
|
||||
export const fetchFinanceItems = (
|
||||
studyId: string,
|
||||
params?: Record<string, any>
|
||||
): Promise<AxiosResponse<ApiListResponse<FinanceItem>>> =>
|
||||
apiGet(`/api/v1/studies/${studyId}/finance/items/`, { params });
|
||||
|
||||
export const fetchFinanceItem = (studyId: string, itemId: string) =>
|
||||
apiGet<FinanceItem>(`/api/v1/studies/${studyId}/finance/items/${itemId}`);
|
||||
|
||||
export const createFinanceItem = (studyId: string, payload: Record<string, any>) =>
|
||||
apiPost<FinanceItem>(`/api/v1/studies/${studyId}/finance/items`, payload);
|
||||
|
||||
export const updateFinanceItem = (studyId: string, itemId: string, payload: Record<string, any>) =>
|
||||
apiPatch<FinanceItem>(`/api/v1/studies/${studyId}/finance/items/${itemId}`, payload);
|
||||
|
||||
export const changeFinanceStatus = (
|
||||
studyId: string,
|
||||
itemId: string,
|
||||
payload: { status: string; reject_reason?: string }
|
||||
) => apiPost<FinanceItem>(`/api/v1/studies/${studyId}/finance/items/${itemId}/status`, payload);
|
||||
|
||||
export const fetchFinanceSummary = (studyId: string, params?: Record<string, any>) =>
|
||||
apiGet<FinanceSummary | ApiListResponse<FinanceSummary>>(
|
||||
`/api/v1/studies/${studyId}/finance/summary`,
|
||||
{ params }
|
||||
);
|
||||
@@ -0,0 +1,138 @@
|
||||
<template>
|
||||
<el-dialog :model-value="modelValue" title="费用" width="520px" @close="close">
|
||||
<el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
|
||||
<el-form-item label="类别" prop="category">
|
||||
<el-select v-model="form.category" placeholder="请选择">
|
||||
<el-option v-for="c in categories" :key="c" :label="c" :value="c" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="标题" prop="title">
|
||||
<el-input v-model="form.title" />
|
||||
</el-form-item>
|
||||
<el-form-item label="描述">
|
||||
<el-input v-model="form.description" type="textarea" :rows="3" />
|
||||
</el-form-item>
|
||||
<el-form-item label="金额" prop="amount">
|
||||
<el-input-number v-model="form.amount" :min="0.01" :step="100" :precision="2" controls-position="right" />
|
||||
</el-form-item>
|
||||
<el-form-item label="币种">
|
||||
<el-input v-model="form.currency" />
|
||||
</el-form-item>
|
||||
<el-form-item label="发生日期" prop="occur_date">
|
||||
<el-date-picker v-model="form.occur_date" type="date" value-format="YYYY-MM-DD" />
|
||||
</el-form-item>
|
||||
<el-form-item label="中心ID">
|
||||
<el-input v-model="form.site_id" placeholder="可选" />
|
||||
</el-form-item>
|
||||
<el-form-item label="受试者ID">
|
||||
<el-input v-model="form.subject_id" placeholder="可选" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="close">取消</el-button>
|
||||
<el-button type="primary" :loading="submitting" @click="onSubmit">提交</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive, ref, watch } from "vue";
|
||||
import { ElMessage, ElMessageBox, FormInstance, FormRules } from "element-plus";
|
||||
import { useStudyStore } from "../store/study";
|
||||
import { createFinanceItem, updateFinanceItem } from "../api/finance";
|
||||
|
||||
const props = defineProps<{ modelValue: boolean; item?: any }>();
|
||||
const emit = defineEmits(["update:modelValue", "success"]);
|
||||
|
||||
const study = useStudyStore();
|
||||
const formRef = ref<FormInstance>();
|
||||
const submitting = ref(false);
|
||||
|
||||
const categories = ["SITE_FEE", "SUBJECT_STIPEND", "TRAVEL", "OTHER"];
|
||||
|
||||
const form = reactive({
|
||||
category: "SITE_FEE",
|
||||
title: "",
|
||||
description: "",
|
||||
amount: 0,
|
||||
currency: "CNY",
|
||||
occur_date: "",
|
||||
site_id: "",
|
||||
subject_id: "",
|
||||
});
|
||||
|
||||
const rules: FormRules = {
|
||||
category: [{ required: true, message: "请选择类别", trigger: "change" }],
|
||||
title: [{ required: true, message: "请输入标题", trigger: "blur" }],
|
||||
amount: [{ required: true, message: "请输入金额", trigger: "blur" }],
|
||||
occur_date: [{ required: true, message: "请选择日期", trigger: "change" }],
|
||||
};
|
||||
|
||||
const isEdit = computed(() => !!props.item);
|
||||
|
||||
const reset = () => {
|
||||
form.category = "SITE_FEE";
|
||||
form.title = "";
|
||||
form.description = "";
|
||||
form.amount = 0;
|
||||
form.currency = "CNY";
|
||||
form.occur_date = "";
|
||||
form.site_id = "";
|
||||
form.subject_id = "";
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.item,
|
||||
(val) => {
|
||||
if (val) {
|
||||
form.category = val.category;
|
||||
form.title = val.title;
|
||||
form.description = val.description || "";
|
||||
form.amount = Number(val.amount) || 0;
|
||||
form.currency = val.currency || "CNY";
|
||||
form.occur_date = val.occur_date;
|
||||
form.site_id = val.site_id || "";
|
||||
form.subject_id = val.subject_id || "";
|
||||
} else {
|
||||
reset();
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
);
|
||||
|
||||
const close = () => emit("update:modelValue", false);
|
||||
|
||||
const onSubmit = async () => {
|
||||
if (!study.currentStudy || !formRef.value) return;
|
||||
await formRef.value.validate();
|
||||
if (form.amount <= 0) {
|
||||
ElMessageBox.alert("金额必须大于 0");
|
||||
return;
|
||||
}
|
||||
submitting.value = true;
|
||||
try {
|
||||
const payload = {
|
||||
category: form.category,
|
||||
title: form.title,
|
||||
description: form.description || null,
|
||||
amount: Number(form.amount),
|
||||
currency: form.currency,
|
||||
occur_date: form.occur_date,
|
||||
site_id: form.site_id ? form.site_id : null,
|
||||
subject_id: form.subject_id ? form.subject_id : null,
|
||||
};
|
||||
if (isEdit.value && props.item) {
|
||||
await updateFinanceItem(study.currentStudy.id, props.item.id, payload);
|
||||
} else {
|
||||
await createFinanceItem(study.currentStudy.id, payload);
|
||||
}
|
||||
ElMessage.success("提交成功");
|
||||
emit("success");
|
||||
close();
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || "提交失败");
|
||||
} finally {
|
||||
submitting.value = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<div class="actions">
|
||||
<el-button
|
||||
v-if="item.status === 'DRAFT' && canSubmit"
|
||||
type="primary"
|
||||
size="small"
|
||||
:loading="loading"
|
||||
@click="change('SUBMITTED')"
|
||||
>
|
||||
提交
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="item.status === 'SUBMITTED' && canApprove"
|
||||
type="success"
|
||||
size="small"
|
||||
:loading="loading"
|
||||
@click="change('APPROVED')"
|
||||
>
|
||||
审批通过
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="item.status === 'SUBMITTED' && canApprove"
|
||||
type="danger"
|
||||
size="small"
|
||||
:loading="loading"
|
||||
@click="reject"
|
||||
>
|
||||
驳回
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="item.status === 'APPROVED' && canPay"
|
||||
type="warning"
|
||||
size="small"
|
||||
:loading="loading"
|
||||
@click="change('PAID')"
|
||||
>
|
||||
确认支付
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ElMessage, ElMessageBox } from "element-plus";
|
||||
import { computed, ref } from "vue";
|
||||
import { changeFinanceStatus } from "../api/finance";
|
||||
import { useStudyStore } from "../store/study";
|
||||
import { useAuthStore } from "../store/auth";
|
||||
|
||||
const props = defineProps<{ item: any }>();
|
||||
const emit = defineEmits(["success"]);
|
||||
|
||||
const study = useStudyStore();
|
||||
const auth = useAuthStore();
|
||||
const loading = ref(false);
|
||||
|
||||
const role = computed(() => auth.user?.role);
|
||||
const canSubmit = computed(() => role.value === "ADMIN" || role.value === "PM" || role.value === "CRA");
|
||||
const canApprove = computed(() => role.value === "ADMIN" || role.value === "PM");
|
||||
const canPay = canApprove;
|
||||
|
||||
const change = async (status: string, reject_reason?: string) => {
|
||||
if (!study.currentStudy) return;
|
||||
loading.value = true;
|
||||
try {
|
||||
await changeFinanceStatus(study.currentStudy.id, props.item.id, { status, reject_reason });
|
||||
ElMessage.success("状态已更新");
|
||||
emit("success");
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || "更新失败");
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const reject = async () => {
|
||||
const reason = await ElMessageBox.prompt("请输入驳回原因", "驳回", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
}).catch(() => null);
|
||||
if (!reason || !reason.value) return;
|
||||
change("REJECTED", reason.value);
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<el-card>
|
||||
<div class="summary">
|
||||
<div class="item">
|
||||
<div class="label">总金额（全部）</div>
|
||||
<div class="value">￥{{ format(summary?.total_amount) }}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">待审批金额</div>
|
||||
<div class="value">￥{{ format(summary?.submitted_amount) }}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">已审批金额</div>
|
||||
<div class="value">￥{{ format(summary?.approved_amount) }}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">已支付金额</div>
|
||||
<div class="value">￥{{ format(summary?.paid_amount) }}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">条目数</div>
|
||||
<div class="value">{{ summary?.count_total ?? 0 }}</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="label">已支付条目</div>
|
||||
<div class="value">{{ summary?.count_paid ?? 0 }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { FinanceSummary } from "../api/finance";
|
||||
|
||||
defineProps<{
|
||||
summary?: FinanceSummary;
|
||||
}>();
|
||||
|
||||
const format = (num?: number | string) => {
|
||||
const n = Number(num);
|
||||
return Number.isFinite(n) ? n.toFixed(2) : "0.00";
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.summary {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
.item {
|
||||
background: #f5f7fa;
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
}
|
||||
.label {
|
||||
color: #606266;
|
||||
font-size: 12px;
|
||||
}
|
||||
.value {
|
||||
font-weight: 600;
|
||||
margin-top: 4px;
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
@@ -20,6 +20,7 @@ import ImpBatches from "../views/ImpBatches.vue";
|
||||
import ImpInventory from "../views/ImpInventory.vue";
|
||||
import ImpTransactions from "../views/ImpTransactions.vue";
|
||||
import Finance from "../views/Finance.vue";
|
||||
import FinanceDetail from "../views/FinanceDetail.vue";
|
||||
import Faq from "../views/Faq.vue";
|
||||
import Issues from "../views/Issues.vue";
|
||||
import IssueDetail from "../views/IssueDetail.vue";
|
||||
@@ -145,6 +146,12 @@ const routes: RouteRecordRaw[] = [
|
||||
component: Finance,
|
||||
meta: { title: "费用", requiresStudy: true },
|
||||
},
|
||||
{
|
||||
path: "study/finance/:itemId",
|
||||
name: "StudyFinanceDetail",
|
||||
component: FinanceDetail,
|
||||
meta: { title: "费用详情", requiresStudy: true },
|
||||
},
|
||||
{
|
||||
path: "study/faq",
|
||||
name: "StudyFaq",
|
||||
|
||||
@@ -1,13 +1,196 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<el-card><h2>费用管理</h2></el-card>
|
||||
<FinanceSummary :summary="summary" class="mb-12" />
|
||||
|
||||
<el-card class="mb-12">
|
||||
<div class="filters">
|
||||
<el-select v-model="filters.status" placeholder="状态" clearable @change="loadList">
|
||||
<el-option v-for="s in statuses" :key="s" :label="s" :value="s" />
|
||||
</el-select>
|
||||
<el-select v-model="filters.category" placeholder="类别" clearable @change="loadList">
|
||||
<el-option v-for="c in categories" :key="c" :label="c" :value="c" />
|
||||
</el-select>
|
||||
<el-date-picker
|
||||
v-model="filters.date_from"
|
||||
type="date"
|
||||
placeholder="开始日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
@change="loadList"
|
||||
/>
|
||||
<el-date-picker
|
||||
v-model="filters.date_to"
|
||||
type="date"
|
||||
placeholder="结束日期"
|
||||
value-format="YYYY-MM-DD"
|
||||
@change="loadList"
|
||||
/>
|
||||
<div class="spacer" />
|
||||
<el-button type="primary" v-if="canCreate" @click="showForm = true">新建费用</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
<el-card>
|
||||
<el-table :data="items" v-loading="loading" @row-click="goDetail" style="width: 100%">
|
||||
<el-table-column prop="title" label="标题" min-width="160" />
|
||||
<el-table-column prop="category" label="类别" width="140" />
|
||||
<el-table-column prop="amount" label="金额" width="140" align="right">
|
||||
<template #default="scope">
|
||||
￥{{ formatAmount(scope.row.amount) }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="occur_date" label="发生日期" width="140" />
|
||||
<el-table-column prop="status" label="状态" width="120">
|
||||
<template #default="scope">
|
||||
<el-tag :type="statusTag(scope.row.status)">{{ scope.row.status }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="submitted_at" label="提交时间" width="160" />
|
||||
<el-table-column prop="approved_at" label="审批时间" width="160" />
|
||||
<el-table-column prop="paid_at" label="支付时间" width="160" />
|
||||
</el-table>
|
||||
<el-pagination
|
||||
class="pagination"
|
||||
layout="prev, pager, next"
|
||||
:page-size="pageSize"
|
||||
:current-page="page"
|
||||
:total="total"
|
||||
@current-change="onPageChange"
|
||||
/>
|
||||
</el-card>
|
||||
|
||||
<FinanceForm v-model="showForm" @success="loadList" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { ElMessage } from "element-plus";
|
||||
import FinanceSummary from "../components/FinanceSummary.vue";
|
||||
import FinanceForm from "../components/FinanceForm.vue";
|
||||
import { fetchFinanceItems, fetchFinanceSummary } from "../api/finance";
|
||||
import { useStudyStore } from "../store/study";
|
||||
import { useAuthStore } from "../store/auth";
|
||||
|
||||
const study = useStudyStore();
|
||||
const auth = useAuthStore();
|
||||
const router = useRouter();
|
||||
|
||||
const items = ref<any[]>([]);
|
||||
const total = ref(0);
|
||||
const page = ref(1);
|
||||
const pageSize = 10;
|
||||
const loading = ref(false);
|
||||
const summary = ref<any>(null);
|
||||
|
||||
const filters = ref({
|
||||
status: "",
|
||||
category: "",
|
||||
date_from: "",
|
||||
date_to: "",
|
||||
});
|
||||
|
||||
const statuses = ["DRAFT", "SUBMITTED", "APPROVED", "REJECTED", "PAID"];
|
||||
const categories = ["SITE_FEE", "SUBJECT_STIPEND", "TRAVEL", "OTHER"];
|
||||
|
||||
const showForm = ref(false);
|
||||
|
||||
const canCreate = computed(() => {
|
||||
const role = auth.user?.role;
|
||||
return role === "ADMIN" || role === "PM" || role === "CRA";
|
||||
});
|
||||
|
||||
const formatAmount = (num?: number | string) => {
|
||||
const n = Number(num);
|
||||
return Number.isFinite(n) ? n.toFixed(2) : "0.00";
|
||||
};
|
||||
|
||||
const statusTag = (status?: string) => {
|
||||
switch (status) {
|
||||
case "DRAFT":
|
||||
return "info";
|
||||
case "SUBMITTED":
|
||||
return "warning";
|
||||
case "APPROVED":
|
||||
return "success";
|
||||
case "REJECTED":
|
||||
return "danger";
|
||||
case "PAID":
|
||||
return "success";
|
||||
default:
|
||||
return "info";
|
||||
}
|
||||
};
|
||||
|
||||
const loadSummary = async () => {
|
||||
if (!study.currentStudy) return;
|
||||
try {
|
||||
const { data } = await fetchFinanceSummary(study.currentStudy.id);
|
||||
summary.value = Array.isArray(data) ? data[0] : data;
|
||||
} catch (e: any) {
|
||||
/* ignore summary errors */
|
||||
}
|
||||
};
|
||||
|
||||
const loadList = async () => {
|
||||
if (!study.currentStudy) return;
|
||||
loading.value = true;
|
||||
try {
|
||||
const params: Record<string, any> = { skip: (page.value - 1) * pageSize, limit: pageSize };
|
||||
if (filters.value.status) params.status = filters.value.status;
|
||||
if (filters.value.category) params.category = filters.value.category;
|
||||
if (filters.value.date_from) params.date_from = filters.value.date_from;
|
||||
if (filters.value.date_to) params.date_to = filters.value.date_to;
|
||||
const { data } = await fetchFinanceItems(study.currentStudy.id, params);
|
||||
if (Array.isArray(data)) {
|
||||
items.value = data;
|
||||
total.value = data.length;
|
||||
} else {
|
||||
items.value = data.items || [];
|
||||
total.value = data.total || 0;
|
||||
}
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || "费用列表加载失败");
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const onPageChange = (p: number) => {
|
||||
page.value = p;
|
||||
loadList();
|
||||
};
|
||||
|
||||
const goDetail = (row: any) => {
|
||||
router.push(`/study/finance/${row.id}`);
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
if (!auth.user && auth.token) {
|
||||
await auth.fetchMe().catch(() => {});
|
||||
}
|
||||
await loadSummary();
|
||||
await loadList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
padding: 16px;
|
||||
}
|
||||
.filters {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
.spacer {
|
||||
flex: 1;
|
||||
}
|
||||
.pagination {
|
||||
margin-top: 12px;
|
||||
text-align: right;
|
||||
}
|
||||
.mb-12 {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<el-card v-loading="loading">
|
||||
<div class="header">
|
||||
<div>
|
||||
<h3>{{ item?.title }}</h3>
|
||||
<el-tag :type="statusTag(item?.status)">{{ item?.status }}</el-tag>
|
||||
</div>
|
||||
<div class="header-actions" v-if="item">
|
||||
<el-button v-if="canEditDraft" size="small" @click="showEdit = true">编辑</el-button>
|
||||
<FinanceStatusActions :item="item" @success="loadItem" />
|
||||
</div>
|
||||
</div>
|
||||
<el-descriptions :column="2" border class="mt-12" v-if="item">
|
||||
<el-descriptions-item label="类别">{{ item.category }}</el-descriptions-item>
|
||||
<el-descriptions-item label="金额">￥{{ formatAmount(item.amount) }} {{ item.currency }}</el-descriptions-item>
|
||||
<el-descriptions-item label="发生日期">{{ item.occur_date }}</el-descriptions-item>
|
||||
<el-descriptions-item label="中心">{{ item.site_id || "-" }}</el-descriptions-item>
|
||||
<el-descriptions-item label="受试者">{{ item.subject_id || "-" }}</el-descriptions-item>
|
||||
<el-descriptions-item label="状态时间">
|
||||
提交: {{ item.submitted_at || "-" }} / 审批: {{ item.approved_at || "-" }} /
|
||||
支付: {{ item.paid_at || "-" }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="驳回原因">{{ item.reject_reason || "-" }}</el-descriptions-item>
|
||||
<el-descriptions-item label="描述">{{ item.description || "-" }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
|
||||
<FinanceForm v-model="showEdit" :item="item" @success="loadItem" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, ref } from "vue";
|
||||
import { useRoute } from "vue-router";
|
||||
import { ElMessage } from "element-plus";
|
||||
import FinanceStatusActions from "../components/FinanceStatusActions.vue";
|
||||
import FinanceForm from "../components/FinanceForm.vue";
|
||||
import { fetchFinanceItem } from "../api/finance";
|
||||
import { useStudyStore } from "../store/study";
|
||||
import { useAuthStore } from "../store/auth";
|
||||
|
||||
const study = useStudyStore();
|
||||
const auth = useAuthStore();
|
||||
const route = useRoute();
|
||||
|
||||
const item = ref<any>(null);
|
||||
const loading = ref(false);
|
||||
const showEdit = ref(false);
|
||||
const canEditDraft = computed(() => {
|
||||
const role = auth.user?.role;
|
||||
return item.value?.status === "DRAFT" && (role === "ADMIN" || role === "PM" || role === "CRA");
|
||||
});
|
||||
|
||||
const loadItem = async () => {
|
||||
if (!study.currentStudy) return;
|
||||
const id = route.params.itemId as string;
|
||||
loading.value = true;
|
||||
try {
|
||||
const { data } = await fetchFinanceItem(study.currentStudy.id, id);
|
||||
item.value = data;
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || "加载失败");
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const statusTag = (status?: string) => {
|
||||
switch (status) {
|
||||
case "DRAFT":
|
||||
return "info";
|
||||
case "SUBMITTED":
|
||||
return "warning";
|
||||
case "APPROVED":
|
||||
return "success";
|
||||
case "REJECTED":
|
||||
return "danger";
|
||||
case "PAID":
|
||||
return "success";
|
||||
default:
|
||||
return "info";
|
||||
}
|
||||
};
|
||||
|
||||
const formatAmount = (num?: number | string) => {
|
||||
const n = Number(num);
|
||||
return Number.isFinite(n) ? n.toFixed(2) : "0.00";
|
||||
};
|
||||
|
||||
onMounted(async () => {
|
||||
if (!auth.user && auth.token) {
|
||||
await auth.fetchMe().catch(() => {});
|
||||
}
|
||||
await loadItem();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
padding: 16px;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.mt-12 {
|
||||
margin-top: 12px;
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Reference in New Issue
Block a user