<script lang="ts" setup>
|
import type { RecordBatchItem, RecordCreated } from '#/api/x/eln/records';
|
|
import { computed, onMounted, ref } from 'vue';
|
|
import { Button, Empty, Table, Tag } from 'ant-design-vue';
|
import { v4 as uuidv4 } from 'uuid';
|
|
import { createRecordsBatch } from '#/api/x/eln/records';
|
import { onlineUtils } from '#/utils/jnpf';
|
|
import { canOpenSingleRecord, ElnRecordBatchParamError, resolveTestWorkItemIds, statusLabel } from './batchView';
|
|
defineOptions({ name: 'XElnRecordBatch' });
|
|
const testWorkItemIds = ref<string[]>([]);
|
const loading = ref(true);
|
const errorMessage = ref('');
|
const results = ref<RecordBatchItem[]>([]);
|
|
const columns = [
|
{ dataIndex: 'testWorkItemId', key: 'testWorkItemId', title: '检验项 ID' },
|
{ dataIndex: 'status', key: 'status', title: '结果', width: 110 },
|
{ key: 'message', title: '说明' },
|
{ key: 'action', title: '操作', width: 100 },
|
];
|
|
const hasResults = computed(() => results.value.length > 0);
|
|
function openRecord(created: RecordCreated) {
|
onlineUtils.openCustomView({
|
page: 'x/eln/records/editor',
|
params: {
|
document: created.document,
|
recordId: created.recordId,
|
revisionId: created.revisionId,
|
},
|
title: '填写电子记录',
|
});
|
}
|
|
function openResult(item: Record<string, any>) {
|
if (item.created) openRecord(item.created as RecordCreated);
|
}
|
|
async function createRecords() {
|
loading.value = true;
|
errorMessage.value = '';
|
results.value = [];
|
try {
|
testWorkItemIds.value = resolveTestWorkItemIds(onlineUtils.getViewParam('testWorkItemIds'));
|
const response = await createRecordsBatch({
|
operationCode: `record-batch-${uuidv4()}`,
|
testWorkItemIds: testWorkItemIds.value,
|
});
|
results.value = response.data?.items || [];
|
const singleResult = results.value[0];
|
if (canOpenSingleRecord(testWorkItemIds.value, singleResult)) {
|
openRecord(singleResult.created);
|
}
|
} catch (error: any) {
|
errorMessage.value = error instanceof ElnRecordBatchParamError ? error.message : error?.message || '批量创建电子记录失败';
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
onMounted(createRecords);
|
</script>
|
|
<template>
|
<div class="jnpf-content-wrapper eln-record-batch">
|
<div v-if="loading" class="eln-record-batch__state" data-test="batch-loading">正在创建电子记录...</div>
|
<div v-else-if="errorMessage" class="eln-record-batch__state" data-test="batch-error" role="alert">{{ errorMessage }}</div>
|
<Empty v-else-if="!hasResults" description="没有可展示的创建结果" data-test="batch-empty" />
|
<Table
|
v-else
|
:columns="columns"
|
:data-source="results"
|
:pagination="false"
|
class="eln-record-batch__table"
|
data-test="batch-results"
|
row-key="testWorkItemId"
|
size="small">
|
<template #bodyCell="{ column, record }">
|
<template v-if="column.key === 'status'">
|
<Tag :color="record.status === 'FAILED' ? 'error' : record.status === 'EXISTING' ? 'default' : 'success'">
|
{{ statusLabel(record.status) }}
|
</Tag>
|
</template>
|
<template v-else-if="column.key === 'message'">
|
<span v-if="record.status === 'FAILED'" class="eln-record-batch__failure" data-test="batch-failure">{{
|
record.errorMessage || '电子记录创建失败'
|
}}</span>
|
<span v-else>{{ record.created?.existing ? '已返回当前电子记录' : '已创建电子记录' }}</span>
|
</template>
|
<template v-else-if="column.key === 'action'">
|
<Button v-if="record.created" size="small" type="link" @click="openResult(record)">打开</Button>
|
</template>
|
</template>
|
</Table>
|
</div>
|
</template>
|
|
<style lang="scss" scoped>
|
.eln-record-batch {
|
min-height: 240px;
|
padding: 16px;
|
background: #fff;
|
|
&__state {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
min-height: 208px;
|
color: rgb(0 0 0 / 65%);
|
}
|
|
&__table {
|
min-width: 0;
|
}
|
|
&__failure {
|
color: #cf1322;
|
}
|
}
|
</style>
|
