信息架构/菜单框架大重构-20260109
This commit is contained in:
Cheng Zhou
@@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div class="page">
|
||||
<div class="page-header">
|
||||
<div>
|
||||
<h1 class="page-title">启动与授权</h1>
|
||||
<p class="page-subtitle">管理启动会记录与人员培训授权</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-card>
|
||||
<el-tabs v-model="activeTab">
|
||||
<el-tab-pane label="启动会记录" name="kickoff">
|
||||
<div class="tab-actions">
|
||||
<el-button type="primary" @click="goNewKickoff">新增启动会</el-button>
|
||||
</div>
|
||||
<el-table :data="kickoffItems" v-loading="loadingKickoff" style="width: 100%">
|
||||
<el-table-column prop="kickoff_date" label="启动会日期" width="160">
|
||||
<template #default="scope">{{ displayDate(scope.row.kickoff_date) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="attendees" label="参训人员" min-width="200">
|
||||
<template #default="scope">
|
||||
{{ (scope.row.attendees || []).join("、") || "—" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="200">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" size="small" @click="goKickoffDetail(scope.row.id)">详情</el-button>
|
||||
<el-button link type="primary" size="small" @click="goKickoffEdit(scope.row.id)">编辑</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<StateEmpty v-if="!loadingKickoff && kickoffItems.length === 0" description="暂无启动会记录" />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="培训与授权" name="training">
|
||||
<div class="tab-actions">
|
||||
<el-button type="primary" @click="goNewTraining">新增人员</el-button>
|
||||
</div>
|
||||
<el-table :data="trainingItems" v-loading="loadingTraining" style="width: 100%">
|
||||
<el-table-column prop="name" label="姓名" min-width="140" />
|
||||
<el-table-column prop="role" label="角色" min-width="120" />
|
||||
<el-table-column prop="site_name" label="分中心" min-width="140" />
|
||||
<el-table-column label="已培训" width="120">
|
||||
<template #default="scope">
|
||||
<el-checkbox v-model="scope.row.trained" @change="toggleTraining(scope.row)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="已授权" width="120">
|
||||
<template #default="scope">
|
||||
<el-checkbox v-model="scope.row.authorized" @change="toggleTraining(scope.row)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="200">
|
||||
<template #default="scope">
|
||||
<el-button link type="primary" size="small" @click="goTrainingDetail(scope.row.id)">详情</el-button>
|
||||
<el-button link type="primary" size="small" @click="goTrainingEdit(scope.row.id)">编辑</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<StateEmpty v-if="!loadingTraining && trainingItems.length === 0" description="暂无培训授权人员" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref } from "vue";
|
||||
import { useRouter } from "vue-router";
|
||||
import { ElMessage } from "element-plus";
|
||||
import { useStudyStore } from "../../store/study";
|
||||
import { listKickoffs, listTrainingAuthorizations, updateTrainingAuthorization } from "../../api/startup";
|
||||
import { displayDate } from "../../utils/display";
|
||||
import StateEmpty from "../../components/StateEmpty.vue";
|
||||
|
||||
const router = useRouter();
|
||||
const study = useStudyStore();
|
||||
const activeTab = ref("kickoff");
|
||||
const kickoffItems = ref<any[]>([]);
|
||||
const trainingItems = ref<any[]>([]);
|
||||
const loadingKickoff = ref(false);
|
||||
const loadingTraining = ref(false);
|
||||
|
||||
const loadKickoffs = async () => {
|
||||
const studyId = study.currentStudy?.id;
|
||||
if (!studyId) return;
|
||||
loadingKickoff.value = true;
|
||||
try {
|
||||
const { data } = await listKickoffs(studyId);
|
||||
kickoffItems.value = Array.isArray(data) ? data : data.items || [];
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || "加载失败");
|
||||
} finally {
|
||||
loadingKickoff.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const loadTraining = async () => {
|
||||
const studyId = study.currentStudy?.id;
|
||||
if (!studyId) return;
|
||||
loadingTraining.value = true;
|
||||
try {
|
||||
const { data } = await listTrainingAuthorizations(studyId);
|
||||
trainingItems.value = Array.isArray(data) ? data : data.items || [];
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || "加载失败");
|
||||
} finally {
|
||||
loadingTraining.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const toggleTraining = async (row: any) => {
|
||||
const studyId = study.currentStudy?.id;
|
||||
if (!studyId) return;
|
||||
try {
|
||||
await updateTrainingAuthorization(studyId, row.id, {
|
||||
trained: row.trained,
|
||||
authorized: row.authorized,
|
||||
});
|
||||
ElMessage.success("已保存");
|
||||
} catch (e: any) {
|
||||
ElMessage.error(e?.response?.data?.message || "保存失败");
|
||||
loadTraining();
|
||||
}
|
||||
};
|
||||
|
||||
const goNewKickoff = () => router.push("/startup/kickoff/new");
|
||||
const goKickoffDetail = (id: string) => router.push(`/startup/kickoff/${id}`);
|
||||
const goKickoffEdit = (id: string) => router.push(`/startup/kickoff/${id}/edit`);
|
||||
|
||||
const goNewTraining = () => router.push("/startup/training/new");
|
||||
const goTrainingDetail = (id: string) => router.push(`/startup/training/${id}`);
|
||||
const goTrainingEdit = (id: string) => router.push(`/startup/training/${id}/edit`);
|
||||
|
||||
onMounted(() => {
|
||||
loadKickoffs();
|
||||
loadTraining();
|
||||
});
|
||||
</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);
|
||||
}
|
||||
|
||||
.tab-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user