<script lang="ts" setup>
|
import type { FormType } from '../data';
|
import type { MesPdProjectApi } from '#/api/mes/pd/project';
|
|
import { computed, onMounted, ref } from 'vue';
|
import { useRoute, useRouter } from 'vue-router';
|
|
import { Page, useVbenModal } from '#/packages/effects/common-ui/src';
|
import { useTabs } from '#/packages/effects/hooks/src';
|
import { MesPdProjectStatusEnum } from '#/packages/constants/src';
|
|
import { Card, message, Tabs } from 'ant-design-vue';
|
|
import {
|
archivePdProject,
|
getPdProject,
|
getPdProjectApproveProcessList,
|
publishPdProject,
|
uploadPdProject,
|
} from '#/api/mes/pd/project';
|
import { useDescription } from '#/components/description';
|
import { ACTION_ICON, TableAction } from '#/adapter/vxe-table';
|
import { $t } from '#/locales';
|
|
import Form from '../modules/form.vue';
|
import DocumentAuditList from '../modules/document-audit-list.vue';
|
import DocumentList from '../modules/document-list.vue';
|
import ProcessSelectModal from '../modules/process-select-modal.vue';
|
import WorkflowTimeline from '../modules/workflow-timeline.vue';
|
import TaskDraftBanner from '../modules/task-draft-banner.vue';
|
import { useDetailSchema } from './data';
|
|
const route = useRoute();
|
const router = useRouter();
|
const tabs = useTabs();
|
|
const loading = ref(false);
|
const projectId = ref(0);
|
const project = ref<MesPdProjectApi.Project>({});
|
const activeTab = ref('workflow');
|
|
const isPendingPublish = computed(
|
() => project.value.status === MesPdProjectStatusEnum.PENDING_PUBLISH,
|
);
|
const isPendingUpload = computed(
|
() => project.value.status === MesPdProjectStatusEnum.PENDING_UPLOAD,
|
);
|
const isPendingAudit = computed(
|
() => project.value.status === MesPdProjectStatusEnum.PENDING_AUDIT,
|
);
|
const isPendingArchive = computed(
|
() => project.value.status === MesPdProjectStatusEnum.PENDING_ARCHIVE,
|
);
|
const isApproving = computed(
|
() => project.value.status === MesPdProjectStatusEnum.APPROVING,
|
);
|
const isArchived = computed(
|
() => project.value.status === MesPdProjectStatusEnum.ARCHIVED,
|
);
|
|
const isFormEditable = computed(
|
() => isPendingPublish.value,
|
);
|
|
const materialFormType = computed<FormType>(() =>
|
isPendingPublish.value || isPendingUpload.value ? 'update' : 'detail',
|
);
|
|
const [Descriptions] = useDescription({
|
bordered: false,
|
column: 4,
|
schema: useDetailSchema(),
|
});
|
|
const [FormModal, formModalApi] = useVbenModal({
|
connectedComponent: Form,
|
destroyOnClose: true,
|
});
|
|
const [ProcessModal, processModalApi] = useVbenModal({
|
connectedComponent: ProcessSelectModal,
|
destroyOnClose: true,
|
});
|
|
async function loadProjectDetail() {
|
loading.value = true;
|
try {
|
project.value = await getPdProject(projectId.value);
|
if (isPendingUpload.value) {
|
activeTab.value = 'material';
|
} else if (isPendingAudit.value) {
|
activeTab.value = 'audit';
|
}
|
} finally {
|
loading.value = false;
|
}
|
}
|
|
function handleBack() {
|
tabs.closeCurrentTab();
|
router.push({ path: '/mes/pd/project' });
|
}
|
|
function handleEdit() {
|
formModalApi.setData({ formType: 'update', id: projectId.value }).open();
|
}
|
|
async function handlePublish() {
|
const hideLoading = message.loading({ content: '发布中…', duration: 0 });
|
try {
|
await publishPdProject(projectId.value);
|
message.success('任务已发布，进入待上传状态');
|
loadProjectDetail();
|
} finally {
|
hideLoading();
|
}
|
}
|
|
async function handleUpload() {
|
const hideLoading = message.loading({ content: '提交审核中…', duration: 0 });
|
try {
|
await uploadPdProject(projectId.value);
|
message.success('已提交资料审核');
|
tabs.closeCurrentTab();
|
router.back();
|
} finally {
|
hideLoading();
|
}
|
}
|
|
/** 提交审批 - 先获取流程列表 */
|
async function handleSubmit() {
|
const hideLoading = message.loading({ content: '获取审批流程...', duration: 0 });
|
try {
|
const processList = await getPdProjectApproveProcessList();
|
hideLoading();
|
if (!processList || processList.length === 0) {
|
message.warning('暂无可用审批流程，请先配置 BPM 流程');
|
return;
|
}
|
// 打开流程选择弹窗
|
processModalApi.setData({ id: projectId.value, processList }).open();
|
} catch {
|
hideLoading();
|
}
|
}
|
|
/** 查看审批详情 */
|
function handleProcessDetail() {
|
if (!project.value.processInstanceId) {
|
message.warning('该项目尚未提交审批');
|
return;
|
}
|
router.push({
|
name: 'BpmProcessInstanceDetail',
|
query: { id: project.value.processInstanceId },
|
});
|
}
|
|
/** 提交审批成功后刷新详情 */
|
function handleSubmitSuccess() {
|
loadProjectDetail();
|
}
|
|
async function handleArchive() {
|
const hideLoading = message.loading({ content: '归档中…', duration: 0 });
|
try {
|
await archivePdProject(projectId.value);
|
message.success('已归档');
|
loadProjectDetail();
|
} finally {
|
hideLoading();
|
}
|
}
|
|
onMounted(() => {
|
projectId.value = Number(route.params.id);
|
loadProjectDetail();
|
});
|
</script>
|
|
<template>
|
<Page
|
auto-content-height
|
:loading="loading"
|
:title="project.taskName || '设计任务详情'"
|
>
|
<FormModal @success="loadProjectDetail" />
|
<ProcessModal @success="handleSubmitSuccess" />
|
|
<template #extra>
|
<TableAction
|
:actions="[
|
{
|
label: '返回',
|
type: 'default',
|
icon: 'lucide:arrow-left',
|
onClick: handleBack,
|
},
|
{
|
label: $t('common.edit'),
|
type: 'primary',
|
icon: ACTION_ICON.EDIT,
|
ifShow: isFormEditable,
|
onClick: handleEdit,
|
},
|
{
|
label: '发布',
|
type: 'primary',
|
ifShow: isPendingPublish,
|
onClick: handlePublish,
|
},
|
{
|
label: '确认上传',
|
type: 'primary',
|
ifShow: isPendingUpload,
|
onClick: handleUpload,
|
},
|
{
|
label: '提交审批',
|
type: 'primary',
|
ifShow: isPendingAudit,
|
onClick: handleSubmit,
|
},
|
{
|
label: '查看审批',
|
type: 'primary',
|
ifShow: isApproving,
|
onClick: handleProcessDetail,
|
},
|
{
|
label: '归档',
|
type: 'default',
|
ifShow: isPendingArchive,
|
onClick: handleArchive,
|
},
|
]"
|
/>
|
</template>
|
|
<TaskDraftBanner
|
v-if="isPendingPublish"
|
:designer-name="project.chiefDesignerNickname"
|
:product-name="project.productName"
|
:version="project.version"
|
@edit="handleEdit"
|
@publish="handlePublish"
|
/>
|
|
<Card class="min-h-[10%]">
|
<Descriptions :data="project" />
|
</Card>
|
|
<Card class="mt-4 min-h-[60%]">
|
<Tabs v-model:active-key="activeTab">
|
<Tabs.TabPane key="workflow" tab="流程进度" :force-render="true">
|
<WorkflowTimeline :status="project.status ?? 0" />
|
</Tabs.TabPane>
|
<Tabs.TabPane v-if="!isPendingAudit" key="material" tab="设计资料">
|
<p v-if="isPendingPublish" class="mb-3 text-sm text-amber-600">
|
请先发布任务后再上传设计资料
|
</p>
|
<DocumentList
|
:form-type="materialFormType"
|
:project-id="projectId"
|
:project-status="project.status"
|
/>
|
</Tabs.TabPane>
|
<Tabs.TabPane v-if="isPendingAudit" key="audit" tab="资料审核">
|
<DocumentAuditList :project-id="projectId" @success="loadProjectDetail" />
|
</Tabs.TabPane>
|
</Tabs>
|
</Card>
|
</Page>
|
</template>
|
