<script lang="ts" setup>
|
import type { TmsRecordDetail } from './types';
|
|
import { onMounted, reactive, ref } from 'vue';
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { useMessage } from '@jnpf/hooks';
|
|
import { getTmsRecordDetail, updateTmsRecord } from '#/api/x/tms/record';
|
|
defineOptions({ name: 'TmsRecordEdit' });
|
|
const route = useRoute();
|
const router = useRouter();
|
const { createMessage } = useMessage();
|
|
const loading = ref(false);
|
const submitting = ref(false);
|
const detail = ref<TmsRecordDetail | null>(null);
|
|
const form = reactive({
|
subject: '',
|
category: '',
|
trainerName: '',
|
trainType: '',
|
evalMode: '',
|
trainMode: '',
|
remark: '',
|
});
|
|
onMounted(() => {
|
loadData();
|
});
|
|
async function loadData() {
|
const id = String(route.params.id || '');
|
if (!id) {
|
router.replace('/tms/record');
|
return;
|
}
|
loading.value = true;
|
try {
|
detail.value = await getTmsRecordDetail(id);
|
form.subject = detail.value.subject;
|
form.category = detail.value.category;
|
form.trainerName = detail.value.trainerName;
|
form.trainType = detail.value.trainType;
|
form.evalMode = detail.value.evalMode;
|
form.trainMode = detail.value.trainMode || '';
|
form.remark = detail.value.remark || '';
|
} catch (e: any) {
|
createMessage.error(e?.message || '加载培训记录失败');
|
router.replace('/tms/record');
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
async function handleSubmit() {
|
if (!detail.value) return;
|
if (!form.subject.trim()) {
|
createMessage.warning('请填写培训主题');
|
return;
|
}
|
submitting.value = true;
|
try {
|
await updateTmsRecord(detail.value.id, { ...form });
|
createMessage.success('保存成功');
|
router.push('/tms/record');
|
} catch (e: any) {
|
createMessage.error(e?.message || '保存失败');
|
} finally {
|
submitting.value = false;
|
}
|
}
|
|
function goBack() {
|
router.push('/tms/record');
|
}
|
</script>
|
|
<template>
|
<div class="jnpf-content-wrapper tms-record-page">
|
<div class="jnpf-content-wrapper-center tms-record-center">
|
<div class="jnpf-content-wrapper-content tms-record-wrap">
|
<a-spin :spinning="loading" class="record-spin">
|
<div v-if="detail" class="record-inner">
|
<div class="record-header">
|
<div>
|
<div class="text-base font-medium">修改培训记录</div>
|
<div class="mt-1 text-gray-400 text-sm">编号：{{ detail.recordNo }}</div>
|
</div>
|
<a-space>
|
<a-button @click="goBack">取消</a-button>
|
<a-button type="primary" :loading="submitting" @click="handleSubmit">保存</a-button>
|
</a-space>
|
</div>
|
|
<a-form layout="vertical" class="edit-form">
|
<a-row :gutter="16">
|
<a-col :span="12">
|
<a-form-item label="培训主题" required>
|
<a-input v-model:value="form.subject" placeholder="请输入培训主题" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-item label="培训分类">
|
<a-input v-model:value="form.category" placeholder="请输入培训分类" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-item label="培训师">
|
<a-input v-model:value="form.trainerName" placeholder="请输入培训师" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-item label="培训类型">
|
<a-input v-model:value="form.trainType" placeholder="请输入培训类型" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-item label="培训方式">
|
<a-input v-model:value="form.trainMode" placeholder="请输入培训方式" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-item label="考核方式">
|
<a-input v-model:value="form.evalMode" placeholder="请输入考核方式" />
|
</a-form-item>
|
</a-col>
|
<a-col :span="24">
|
<a-form-item label="备注">
|
<a-textarea v-model:value="form.remark" :rows="3" placeholder="备注（可选）" />
|
</a-form-item>
|
</a-col>
|
</a-row>
|
</a-form>
|
</div>
|
</a-spin>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style scoped>
|
.tms-record-page,
|
.tms-record-center {
|
height: 100%;
|
min-height: 0;
|
}
|
|
.tms-record-wrap {
|
display: flex !important;
|
flex-direction: column;
|
flex: 1 1 0 !important;
|
min-height: 0 !important;
|
height: 100%;
|
overflow: auto !important;
|
background: #fff;
|
}
|
|
.record-spin {
|
display: block;
|
min-height: 100%;
|
width: 100%;
|
}
|
|
.record-inner {
|
padding: 16px 20px 24px;
|
max-width: 960px;
|
}
|
|
.record-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 16px;
|
}
|
</style>
|
