信息架构/菜单框架大重构-20260109
This commit is contained in:
Cheng Zhou
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h1 class="page-title">合同费用详情</h1>
|
||||
<p class="page-subtitle">查看合同费用与附件</p>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<el-button type="primary" @click="goEdit">编辑</el-button>
|
||||
<el-button @click="goBack">返回</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-card v-loading="loading">
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item label="分中心">{{ detail.site_name || "—" }}</el-descriptions-item>
|
||||
<el-descriptions-item label="合同编号">{{ detail.contract_no || "—" }}</el-descriptions-item>
|
||||
<el-descriptions-item label="签署日期">{{ displayDate(detail.signed_date) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="合同金额">
|
||||
{{ detail.amount }} {{ detail.currency || "CNY" }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="备注" :span="2">{{ detail.remark || "—" }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
|
||||
<AttachmentList
|
||||
v-if="contractId"
|
||||
:study-id="studyId"
|
||||
entity-type="finance_contract"
|
||||
:entity-id="contractId"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { useStudyStore } from "../../store/study";
|
||||
import { getFinanceContract } from "../../api/financeContracts";
|
||||
import { displayDate } from "../../utils/display";
|
||||
import AttachmentList from "../../components/attachments/AttachmentList.vue";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const study = useStudyStore();
|
||||
const loading = ref(false);
|
||||
const contractId = route.params.contractId as string;
|
||||
const studyId = study.currentStudy?.id || "";
|
||||
|
||||
const detail = reactive<any>({
|
||||
site_name: "",
|
||||
contract_no: "",
|
||||
signed_date: "",
|
||||
amount: "",
|
||||
currency: "",
|
||||
remark: "",
|
||||
});
|
||||
|
||||
const load = async () => {
|
||||
if (!studyId || !contractId) return;
|
||||
loading.value = true;
|
||||
try {
|
||||
const { data } = await getFinanceContract(studyId, contractId);
|
||||
Object.assign(detail, data);
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || "加载失败");
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const goEdit = () => router.push(`/finance/contracts/${contractId}/edit`);
|
||||
const goBack = () => router.push("/finance/contracts");
|
||||
|
||||
onMounted(load);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
margin: 6px 0 0;
|
||||
font-size: 13px;
|
||||
color: var(--ctms-text-secondary);
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h1 class="page-title">{{ isEdit ? "编辑合同费用" : "新增合同费用" }}</h1>
|
||||
<p class="page-subtitle">填写分中心合同信息并保存</p>
|
||||
</div>
|
||||
<el-button @click="goBack">返回</el-button>
|
||||
</div>
|
||||
|
||||
<el-card>
|
||||
<el-form ref="formRef" :model="form" label-width="110px">
|
||||
<el-form-item label="分中心" prop="site_name" required>
|
||||
<el-input v-model="form.site_name" placeholder="输入分中心/机构名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="合同编号" prop="contract_no" required>
|
||||
<el-input v-model="form.contract_no" placeholder="输入合同编号" />
|
||||
</el-form-item>
|
||||
<el-form-item label="签署日期">
|
||||
<el-date-picker v-model="form.signed_date" type="date" value-format="YYYY-MM-DD" placeholder="选择日期" />
|
||||
</el-form-item>
|
||||
<el-form-item label="合同金额" prop="amount" required>
|
||||
<el-input-number v-model="form.amount" :min="0" :precision="2" :step="1000" />
|
||||
</el-form-item>
|
||||
<el-form-item label="币种">
|
||||
<el-select v-model="form.currency" placeholder="选择币种">
|
||||
<el-option label="CNY" value="CNY" />
|
||||
<el-option label="USD" value="USD" />
|
||||
<el-option label="EUR" value="EUR" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="form.remark" type="textarea" :rows="3" placeholder="补充说明" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :loading="saving" @click="submit">保存</el-button>
|
||||
<el-button @click="goBack">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<AttachmentList
|
||||
v-if="isEdit && contractId"
|
||||
:study-id="studyId"
|
||||
entity-type="finance_contract"
|
||||
:entity-id="contractId"
|
||||
/>
|
||||
<el-card v-else class="hint-card">
|
||||
<StateEmpty description="保存后可上传合同附件" />
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, reactive, ref } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { useStudyStore } from "../../store/study";
|
||||
import { createFinanceContract, getFinanceContract, updateFinanceContract } from "../../api/financeContracts";
|
||||
import AttachmentList from "../../components/attachments/AttachmentList.vue";
|
||||
import StateEmpty from "../../components/StateEmpty.vue";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const study = useStudyStore();
|
||||
const saving = ref(false);
|
||||
|
||||
const contractId = computed(() => route.params.contractId as string | undefined);
|
||||
const isEdit = computed(() => !!contractId.value);
|
||||
const studyId = computed(() => study.currentStudy?.id || "");
|
||||
|
||||
const form = reactive({
|
||||
site_name: "",
|
||||
contract_no: "",
|
||||
signed_date: "",
|
||||
amount: 0,
|
||||
currency: "CNY",
|
||||
remark: "",
|
||||
});
|
||||
|
||||
const load = async () => {
|
||||
if (!isEdit.value || !studyId.value || !contractId.value) return;
|
||||
try {
|
||||
const { data } = await getFinanceContract(studyId.value, contractId.value);
|
||||
Object.assign(form, {
|
||||
site_name: data.site_name || "",
|
||||
contract_no: data.contract_no || "",
|
||||
signed_date: data.signed_date || "",
|
||||
amount: Number(data.amount || 0),
|
||||
currency: data.currency || "CNY",
|
||||
remark: data.remark || "",
|
||||
});
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || "加载失败");
|
||||
}
|
||||
};
|
||||
|
||||
const submit = async () => {
|
||||
if (!studyId.value) return;
|
||||
saving.value = true;
|
||||
try {
|
||||
const payload = {
|
||||
site_name: form.site_name,
|
||||
contract_no: form.contract_no,
|
||||
signed_date: form.signed_date || null,
|
||||
amount: form.amount,
|
||||
currency: form.currency,
|
||||
remark: form.remark || null,
|
||||
};
|
||||
if (isEdit.value && contractId.value) {
|
||||
await updateFinanceContract(studyId.value, contractId.value, payload);
|
||||
ElMessage.success("已保存");
|
||||
router.push(`/finance/contracts/${contractId.value}`);
|
||||
} else {
|
||||
const { data } = await createFinanceContract(studyId.value, payload);
|
||||
ElMessage.success("已创建");
|
||||
router.push(`/finance/contracts/${data.id}`);
|
||||
}
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || "保存失败");
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const goBack = () => router.push("/finance/contracts");
|
||||
|
||||
onMounted(load);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
margin: 6px 0 0;
|
||||
font-size: 13px;
|
||||
color: var(--ctms-text-secondary);
|
||||
}
|
||||
|
||||
.hint-card {
|
||||
padding: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h1 class="page-title">特殊费用详情</h1>
|
||||
<p class="page-subtitle">查看费用记录与附件</p>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<el-button type="primary" @click="goEdit">编辑</el-button>
|
||||
<el-button @click="goBack">返回</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-card v-loading="loading">
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item label="分中心">{{ detail.site_name || "—" }}</el-descriptions-item>
|
||||
<el-descriptions-item label="费用类型">{{ detail.fee_type || "—" }}</el-descriptions-item>
|
||||
<el-descriptions-item label="发生日期">{{ displayDate(detail.occur_date) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="人员">{{ detail.staff_name || "—" }}</el-descriptions-item>
|
||||
<el-descriptions-item label="金额">{{ detail.amount || "—" }}</el-descriptions-item>
|
||||
<el-descriptions-item label="备注" :span="2">{{ detail.remark || "—" }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-card>
|
||||
|
||||
<AttachmentList
|
||||
v-if="specialId"
|
||||
:study-id="studyId"
|
||||
entity-type="finance_special"
|
||||
:entity-id="specialId"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { useStudyStore } from "../../store/study";
|
||||
import { getFinanceSpecial } from "../../api/financeSpecials";
|
||||
import { displayDate } from "../../utils/display";
|
||||
import AttachmentList from "../../components/attachments/AttachmentList.vue";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const study = useStudyStore();
|
||||
const loading = ref(false);
|
||||
const specialId = route.params.specialId as string;
|
||||
const studyId = study.currentStudy?.id || "";
|
||||
|
||||
const detail = reactive<any>({
|
||||
site_name: "",
|
||||
fee_type: "",
|
||||
occur_date: "",
|
||||
staff_name: "",
|
||||
amount: "",
|
||||
remark: "",
|
||||
});
|
||||
|
||||
const load = async () => {
|
||||
if (!studyId || !specialId) return;
|
||||
loading.value = true;
|
||||
try {
|
||||
const { data } = await getFinanceSpecial(studyId, specialId);
|
||||
Object.assign(detail, data);
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || "加载失败");
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const goEdit = () => router.push(`/finance/special/${specialId}/edit`);
|
||||
const goBack = () => router.push("/finance/special");
|
||||
|
||||
onMounted(load);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
margin: 6px 0 0;
|
||||
font-size: 13px;
|
||||
color: var(--ctms-text-secondary);
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,160 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h1 class="page-title">{{ isEdit ? "编辑特殊费用" : "新增特殊费用" }}</h1>
|
||||
<p class="page-subtitle">记录差旅、住宿等特殊费用</p>
|
||||
</div>
|
||||
<el-button @click="goBack">返回</el-button>
|
||||
</div>
|
||||
|
||||
<el-card>
|
||||
<el-form :model="form" label-width="110px">
|
||||
<el-form-item label="分中心" required>
|
||||
<el-input v-model="form.site_name" placeholder="输入分中心/机构名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="费用类型" required>
|
||||
<el-select v-model="form.fee_type" placeholder="选择类型">
|
||||
<el-option label="差旅" value="差旅" />
|
||||
<el-option label="住宿" value="住宿" />
|
||||
<el-option label="交通" value="交通" />
|
||||
<el-option label="其他" value="其他" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="金额" required>
|
||||
<el-input-number v-model="form.amount" :min="0" :precision="2" :step="100" />
|
||||
</el-form-item>
|
||||
<el-form-item label="发生日期">
|
||||
<el-date-picker v-model="form.occur_date" type="date" value-format="YYYY-MM-DD" placeholder="选择日期" />
|
||||
</el-form-item>
|
||||
<el-form-item label="人员">
|
||||
<el-input v-model="form.staff_name" placeholder="输入人员姓名" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="form.remark" type="textarea" :rows="3" placeholder="补充说明" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" :loading="saving" @click="submit">保存</el-button>
|
||||
<el-button @click="goBack">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-card>
|
||||
|
||||
<AttachmentList
|
||||
v-if="isEdit && specialId"
|
||||
:study-id="studyId"
|
||||
entity-type="finance_special"
|
||||
:entity-id="specialId"
|
||||
/>
|
||||
<el-card v-else class="hint-card">
|
||||
<StateEmpty description="保存后可上传凭证附件" />
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, onMounted, reactive, ref } from "vue";
|
||||
import { useRoute, useRouter } from "vue-router";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { useStudyStore } from "../../store/study";
|
||||
import { createFinanceSpecial, getFinanceSpecial, updateFinanceSpecial } from "../../api/financeSpecials";
|
||||
import AttachmentList from "../../components/attachments/AttachmentList.vue";
|
||||
import StateEmpty from "../../components/StateEmpty.vue";
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const study = useStudyStore();
|
||||
const saving = ref(false);
|
||||
|
||||
const specialId = computed(() => route.params.specialId as string | undefined);
|
||||
const isEdit = computed(() => !!specialId.value);
|
||||
const studyId = computed(() => study.currentStudy?.id || "");
|
||||
|
||||
const form = reactive({
|
||||
site_name: "",
|
||||
fee_type: "差旅",
|
||||
amount: 0,
|
||||
occur_date: "",
|
||||
staff_name: "",
|
||||
remark: "",
|
||||
});
|
||||
|
||||
const load = async () => {
|
||||
if (!isEdit.value || !studyId.value || !specialId.value) return;
|
||||
try {
|
||||
const { data } = await getFinanceSpecial(studyId.value, specialId.value);
|
||||
Object.assign(form, {
|
||||
site_name: data.site_name || "",
|
||||
fee_type: data.fee_type || "差旅",
|
||||
amount: Number(data.amount || 0),
|
||||
occur_date: data.occur_date || "",
|
||||
staff_name: data.staff_name || "",
|
||||
remark: data.remark || "",
|
||||
});
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || "加载失败");
|
||||
}
|
||||
};
|
||||
|
||||
const submit = async () => {
|
||||
if (!studyId.value) return;
|
||||
saving.value = true;
|
||||
try {
|
||||
const payload = {
|
||||
site_name: form.site_name,
|
||||
fee_type: form.fee_type,
|
||||
amount: form.amount,
|
||||
occur_date: form.occur_date || null,
|
||||
staff_name: form.staff_name || null,
|
||||
remark: form.remark || null,
|
||||
};
|
||||
if (isEdit.value && specialId.value) {
|
||||
await updateFinanceSpecial(studyId.value, specialId.value, payload);
|
||||
ElMessage.success("已保存");
|
||||
router.push(`/finance/special/${specialId.value}`);
|
||||
} else {
|
||||
const { data } = await createFinanceSpecial(studyId.value, payload);
|
||||
ElMessage.success("已创建");
|
||||
router.push(`/finance/special/${data.id}`);
|
||||
}
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || "保存失败");
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const goBack = () => router.push("/finance/special");
|
||||
|
||||
onMounted(load);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
margin: 6px 0 0;
|
||||
font-size: 13px;
|
||||
color: var(--ctms-text-secondary);
|
||||
}
|
||||
|
||||
.hint-card {
|
||||
padding: 12px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user