<script lang="ts" setup>
|
import type { PracticeForm, PracticeItem } from '#/api/x/tms/practice';
|
|
import { onMounted, ref } from 'vue';
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { useMessage } from '@jnpf/hooks';
|
import dayjs from 'dayjs';
|
|
import { getPracticeByRecord, savePractice } from '#/api/x/tms/practice';
|
import { TMS_BTN } from '#/views/x/tms/shared/ui';
|
|
import { labelOfPassFlag, loadRecordDics } from './constants';
|
|
import '#/views/x/tms/shared/page.css';
|
|
defineOptions({ name: 'TmsRecordPractice' });
|
|
const route = useRoute();
|
const router = useRouter();
|
const { createMessage } = useMessage();
|
|
const loading = ref(false);
|
const saving = ref(false);
|
const form = ref<PracticeForm>({ items: [] });
|
|
const columns = [
|
{ title: '姓名', dataIndex: 'userName', width: 120 },
|
{ title: '部门', dataIndex: 'deptName', width: 160 },
|
{ title: '得分', dataIndex: 'score', width: 120 },
|
{ title: '合格', dataIndex: 'resultFlag', width: 120 },
|
{ title: '评语', dataIndex: 'content' },
|
];
|
|
onMounted(async () => {
|
await loadRecordDics();
|
await loadData();
|
});
|
|
async function loadData() {
|
const id = String(route.params.id || '');
|
if (!id) {
|
router.replace('/tms/record');
|
return;
|
}
|
loading.value = true;
|
try {
|
form.value = await getPracticeByRecord(id);
|
if (!form.value.practiceTime) {
|
form.value.practiceTime = dayjs().format('YYYY-MM-DD HH:mm:ss');
|
}
|
if (!form.value.items?.length) {
|
createMessage.info('暂无已签到学员，可签到后再打分');
|
}
|
} catch (e: any) {
|
createMessage.error(e?.message || '加载实操评分失败');
|
router.replace(`/tms/record/detail/${id}`);
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
async function handleSave() {
|
saving.value = true;
|
try {
|
await savePractice({
|
...form.value,
|
items: (form.value.items || []).map((row) => ({
|
...row,
|
score: row.score == null || (row.score as any) === '' ? undefined : Number(row.score),
|
})),
|
});
|
createMessage.success('保存成功');
|
await loadData();
|
} catch (e: any) {
|
createMessage.error(e?.message || '保存失败');
|
} finally {
|
saving.value = false;
|
}
|
}
|
|
function goBack() {
|
const id = String(route.params.id || form.value.recordId || '');
|
router.push(id ? `/tms/record/detail/${id}` : '/tms/record');
|
}
|
|
function passLabel(row: PracticeItem) {
|
return labelOfPassFlag(row.resultFlag) || '-';
|
}
|
</script>
|
|
<template>
|
<div class="jnpf-content-wrapper tms-practice-page" v-loading="loading">
|
<div class="jnpf-content-wrapper-center">
|
<div class="jnpf-content-wrapper-content tms-practice-wrap">
|
<a-card title="实操打分" :bordered="false">
|
<template #extra>
|
<a-space>
|
<a-button @click="goBack">{{ TMS_BTN.back }}</a-button>
|
<a-button type="primary" :loading="saving" @click="handleSave">{{ TMS_BTN.save }}</a-button>
|
</a-space>
|
</template>
|
|
<a-form layout="inline" class="practice-meta">
|
<a-form-item label="实操时间">
|
<a-input v-model:value="form.practiceTime" style="width: 220px" />
|
</a-form-item>
|
<a-form-item label="备注">
|
<a-input v-model:value="form.remark" style="width: 320px" maxlength="200" />
|
</a-form-item>
|
</a-form>
|
|
<a-table
|
size="small"
|
bordered
|
row-key="userId"
|
:columns="columns"
|
:data-source="form.items || []"
|
:pagination="false"
|
:locale="{ emptyText: '暂无已签到学员' }"
|
>
|
<template #bodyCell="{ column, record }">
|
<template v-if="column.dataIndex === 'score'">
|
<a-input-number
|
v-model:value="record.score"
|
:min="0"
|
:max="100"
|
:precision="1"
|
style="width: 100%"
|
/>
|
</template>
|
<template v-else-if="column.dataIndex === 'resultFlag'">
|
<a-select
|
v-model:value="record.resultFlag"
|
allow-clear
|
style="width: 100%"
|
:options="[
|
{ label: '合格', value: 'pass' },
|
{ label: '不合格', value: 'fail' },
|
]"
|
:placeholder="passLabel(record)"
|
/>
|
</template>
|
<template v-else-if="column.dataIndex === 'content'">
|
<a-input v-model:value="record.content" maxlength="200" />
|
</template>
|
</template>
|
</a-table>
|
</a-card>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<style scoped>
|
.tms-practice-page {
|
height: 100%;
|
min-height: 0;
|
}
|
|
.tms-practice-wrap {
|
height: 100%;
|
min-height: 0;
|
overflow-x: hidden;
|
overflow-y: auto !important;
|
background: #fff;
|
box-sizing: border-box;
|
}
|
|
.practice-meta {
|
margin-bottom: 16px;
|
}
|
</style>
|
