Step F9：费用管理（Finance）前端
This commit is contained in:
Cheng Zhou
@@ -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>
|
||||
Reference in New Issue
Block a user