liu
2 天以前 726b359e53c1ee75bd756212c9b6e2a02c23b6b3
Merge remote-tracking branch 'origin/dev_pro2.0' into dev_pro2.0
已修改18个文件
299 ■■■■ 文件已修改
src/api/mes/md/workstation/worker/index.ts 12 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/api/mes/pro/feedback/index.ts 7 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/api/mes/pro/route/process/index.ts 1 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/api/mes/pro/task/index.ts 1 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/api/mes/pro/workorder/process/index.ts 1 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/router/guard.ts 5 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/store/auth.ts 4 ●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/mes/pd/archive/modules/detail.vue 32 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/mes/pro/feedback/data.ts 1 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/mes/pro/feedback/modules/form.vue 38 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/mes/pro/route/data.ts 14 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/mes/pro/task/data.ts 52 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/mes/pro/task/index.vue 44 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/mes/pro/task/modules/schedule-form.vue 1 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/mes/pro/task/modules/task-form.vue 15 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/mes/pro/task/modules/task-list.vue 28 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/mes/pro/workorder/data.ts 28 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/views/mes/pro/workorder/index.vue 15 ●●●● 补丁 | 查看 | 原始文档 | blame | 历史
src/api/mes/md/workstation/worker/index.ts
@@ -1,4 +1,5 @@
import { requestClient } from '#/api/request';
import type { SystemUserApi } from '#/api/system/user';
export namespace MesMdWorkstationWorkerApi {
  /** MES 工作站人力资源 */
@@ -21,6 +22,17 @@
  );
}
/** 获得工作站对应岗位的员工列表 */
export function getUserListByWorkstationId(params: { workstationId: number }) {
  if (!params || !params.workstationId) {
    return Promise.resolve([]);
  }
  return requestClient.get<SystemUserApi.UserSimple[]>(
    '/mes/md-workstation-worker/list-user-by-workstation',
    { params },
  );
}
/** 新增工作站人力资源 */
export function createWorkstationWorker(
  data: MesMdWorkstationWorkerApi.WorkstationWorker,
src/api/mes/pro/feedback/index.ts
@@ -64,6 +64,12 @@
    createTime?: number; // 创建时间
    processInstanceId?: string; // BPM 流程实例编号
    processDefinitionKey?: string; // BPM 流程定义 Key
    paramValues?: ParamValue[];
  }
  export interface ParamValue {
    detailId: number;
    value?: string;
  }
  /** MES 生产报工分页查询参数 */
@@ -163,6 +169,7 @@
/** 快速报工请求 */
export interface QuickCreateReq {
  taskId: number;
  paramValues?: MesProFeedbackApi.ParamValue[];
  feedbackQuantity: number;
  qualifiedQuantity?: number;
  unqualifiedQuantity?: number;
src/api/mes/pro/route/process/index.ts
@@ -15,6 +15,7 @@
    id?: number;
    routeId?: number;
    processId?: number;
    paramTemplateId?: number;
    processCode?: string;
    processName?: string;
    sort?: number;
src/api/mes/pro/task/index.ts
@@ -29,6 +29,7 @@
    workstationName?: string; // 工作站名称
    routeId?: number; // 工艺路线编号
    processId?: number; // 工序编号
    paramTemplateId?: number; // 工艺参数模板编号
    processName?: string; // 工序名称
    itemId?: number; // 产品物料编号
    itemCode?: string; // 产品编码
src/api/mes/pro/workorder/process/index.ts
@@ -19,6 +19,7 @@
    processId?: number; // 工序编号
    processCode?: string; // 工序编码
    processName?: string; // 工序名称
    paramTemplateId?: number; // 工艺参数模板编号
    sort?: number; // 序号
    nextProcessId?: number; // 下一道工序编号
    nextProcessName?: string; // 下一道工序名称
src/router/guard.ts
@@ -60,8 +60,7 @@
      if (to.path === LOGIN_PATH && accessStore.accessToken) {
        return decodeURIComponent(
          (to.query?.redirect as string) ||
            userStore.userInfo?.homePath ||
            preferences.app.defaultHomePath,
            '/analytics',
        );
      }
      return true;
@@ -132,7 +131,7 @@
    userStore.setUserRoles(userRoles);
    const redirectPath = (from.query.redirect ??
      (to.path === preferences.app.defaultHomePath
        ? userInfo?.homePath || preferences.app.defaultHomePath
        ? '/analytics'
        : to.fullPath)) as string;
    return {
src/store/auth.ts
@@ -86,9 +86,7 @@
          // oxlint-disable-next-line no-unused-expressions
          onSuccess
            ? await onSuccess?.()
            : await router.push(
                userInfo.homePath || preferences.app.defaultHomePath,
              );
            : await router.push('/analytics');
        }
        if (userInfo?.nickname) {
src/views/mes/pd/archive/modules/detail.vue
@@ -54,23 +54,33 @@
watch(() => props.visible, async (newVal) => {
  if (newVal && props.productCode) {
    open.value = true;
    loading.value = true;
    detailList.value = [];
    activeProject.value = '0';
    try {
      detailList.value = await getPdArchiveDetailByProduct(props.productCode);
    } catch {
      message.error('获取归档详情失败');
    } finally {
      loading.value = false;
    }
    loadData(props.productCode);
  } else if (!newVal) {
    open.value = false;
    detailList.value = [];
  }
});
async function loadData(code: string) {
  open.value = true;
  loading.value = true;
  detailList.value = [];
  activeProject.value = '0';
  try {
    detailList.value = await getPdArchiveDetailByProduct(code);
  } catch {
    message.error('获取归档详情失败');
  } finally {
    loading.value = false;
  }
}
function openModal(code: string) {
  loadData(code);
}
defineExpose({ open: openModal });
function handleClose() {
  emit('update:visible', false);
}
src/views/mes/pro/feedback/data.ts
@@ -18,6 +18,7 @@
import { generateAutoCode } from '#/api/mes/md/autocode/record';
import { getRouteProcessByRouteAndProcess } from '#/api/mes/pro/route/process';
import { getWorkOrderParamRecordPage } from '#/api/mes/pro/workorderparamrecord';
import { getSimpleUserList } from '#/api/system/user';
import { getRangePickerDefaultProps } from '#/utils';
import { MdItemSelect } from '#/views/mes/md/item/components';
src/views/mes/pro/feedback/modules/form.vue
@@ -11,7 +11,7 @@
import { MesAutoCodeRuleCode, MesProFeedbackStatusEnum } from '@vben/constants';
import { useUserStore } from '@vben/stores';
import { Button, message, Popconfirm, Tabs } from 'ant-design-vue';
import { Button, Input, message, Popconfirm, Tabs } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { generateAutoCode } from '#/api/mes/md/autocode/record';
@@ -26,6 +26,7 @@
} from '#/api/mes/pro/feedback';
import { getRouteProcessByRouteAndProcess } from '#/api/mes/pro/route/process';
import { getWorkOrder } from '#/api/mes/pro/workorder';
import { getWorkOrderParamRecordPage } from '#/api/mes/pro/workorderparamrecord';
import { $t } from '#/locales';
import { useFormSchema } from '../data';
@@ -40,6 +41,7 @@
const userStore = useUserStore();
const subTabsName = ref('itemConsume');
const originalSnapshot = ref(''); // 表单原始数据快照,用于 submit 时跳过未变更的保存请求
const paramDetails = ref<Array<{ id: number; paramName?: string; paramCode?: string; unitMeasureName?: string; paramValue?: string }>>([]);
const isEditable = computed(() =>
  ['create', 'submit', 'update'].includes(formType.value),
@@ -105,6 +107,7 @@
/** 读取并按提交规则对齐后的表单数据,用于快照和保存 */
async function getAlignedData(): Promise<MesProFeedbackApi.Feedback> {
  const data = (await formApi.getValues()) as MesProFeedbackApi.Feedback;
  syncParamValues(data);
  alignQuantity(data);
  return data;
}
@@ -145,6 +148,27 @@
const batchDialogRef = ref<InstanceType<typeof BatchInputDialog>>();
const batchActionType = ref<'submit' | 'approve'>('');
async function loadParamDetails(taskId?: number) {
  paramDetails.value = [];
  if (!taskId) return;
  const page = await getWorkOrderParamRecordPage({ taskId, pageNo: 1, pageSize: 1 });
  const record = page.list?.[0];
  paramDetails.value = (record?.details ?? []).map((detail) => ({
    id: detail.id!,
    paramCode: detail.paramCode,
    paramName: detail.paramName,
    unitMeasureName: detail.unitMeasureName,
    paramValue: detail.paramValue,
  }));
}
function syncParamValues(data: MesProFeedbackApi.Feedback) {
  data.paramValues = paramDetails.value.map((detail) => ({
    detailId: detail.id,
    value: detail.paramValue,
  }));
}
/** 执行提交(含批次属性) */
async function doSubmit(batchFields?: Record<string, unknown>) {
@@ -336,6 +360,7 @@
    modalApi.lock();
    try {
      formData.value = await getFeedback(data.id);
      await loadParamDetails(formData.value.taskId);
      const checkFlag = await resolveCheckFlag(
        formData.value.routeId,
        formData.value.processId,
@@ -354,6 +379,17 @@
<template>
  <Modal :title="getTitle" class="w-3/5">
    <Form class="mx-4" />
    <div v-if="paramDetails.length" class="mx-4 mt-4 rounded border border-gray-200 p-4">
      <div class="mb-3 font-medium">工艺参数</div>
      <div class="grid grid-cols-2 gap-3">
        <div v-for="detail in paramDetails" :key="detail.id" class="flex items-center gap-2">
          <span class="w-40 text-right text-sm text-gray-600">
            {{ detail.paramName || detail.paramCode }}{{ detail.unitMeasureName ? `(${detail.unitMeasureName})` : '' }}
          </span>
          <Input v-model:value="detail.paramValue" :disabled="!isEditable" placeholder="请输入参数值" />
        </div>
      </div>
    </div>
    <Tabs
      v-if="showSubTabs"
      v-model:active-key="subTabsName"
src/views/mes/pro/route/data.ts
@@ -18,6 +18,7 @@
import { z } from '#/adapter/form';
import { generateAutoCode } from '#/api/mes/md/autocode/record';
import { getTemplatePage } from '#/api/mes/pro/processdesign/template';
import {
  MdItemSelect,
  MdProductBomSelect,
@@ -216,6 +217,19 @@
      rules: 'selectRequired',
    },
    {
      fieldName: 'paramTemplateId',
      label: '工艺参数模板',
      component: 'ApiSelect',
      componentProps: {
        api: () => getTemplatePage({ pageNo: 1, pageSize: 100 }),
        labelField: 'templateName',
        valueField: 'id',
        resultField: 'list',
        allowClear: true,
        placeholder: '请选择工艺参数模板',
      },
    },
    {
      fieldName: 'linkType',
      label: '与下道工序关系',
      component: 'Select',
src/views/mes/pro/task/data.ts
@@ -2,6 +2,8 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import { z } from '#/adapter/form';
import { getSimpleUserListByRoleCode } from '#/api/system/user';
import { getTemplatePage } from '#/api/mes/pro/processdesign/template';
import { getUserListByWorkstationId } from '#/api/mes/md/workstation/worker';
import type { MesProTaskApi } from '#/api/mes/pro/task';
import type { MesProWorkOrderApi } from '#/api/mes/pro/workorder';
@@ -163,6 +165,12 @@
      field: 'quantityProduced',
      title: '已生产数量',
      width: 100,
    },
    {
      field: 'progressPercent',
      title: '完成进度',
      width: 150,
      slots: { default: 'progressPercent' },
    },
    {
      field: 'clientCode',
@@ -347,6 +355,12 @@
      width: 120,
    },
    {
      field: 'paramTemplateId',
      title: '工艺参数模板',
      minWidth: 140,
      formatter: ({ cellValue }) => cellValue ? `模板 #${cellValue}` : '未配置',
    },
    {
      field: 'quantity',
      title: '排产数量',
      width: 100,
@@ -393,8 +407,21 @@
}
/** 生产任务新增/修改的表单 */
export function useTaskFormSchema(formApi?: VbenFormApi, workOrderQuantity?: Ref<number | undefined>, feedbackRole?: Ref<string | undefined>): VbenFormSchema[] {
export function useTaskFormSchema(formApi?: VbenFormApi, workOrderQuantity?: Ref<number | undefined>): VbenFormSchema[] {
  return [
    {
      fieldName: 'paramTemplateId',
      label: '工艺参数模板',
      component: 'ApiSelect',
      componentProps: {
        api: () => getTemplatePage({ pageNo: 1, pageSize: 100 }),
        labelField: 'templateName',
        valueField: 'id',
        resultField: 'list',
        allowClear: true,
        placeholder: '请选择工艺参数模板',
      },
    },
    {
      fieldName: 'workstationId',
      label: '工作站',
@@ -475,11 +502,18 @@
      component: 'ApiSelect',
      componentProps: {
        placeholder: '请选择报工人',
        api: getSimpleUserListByRoleCode,
        params: { code: feedbackRole?.value || 'production_submit_work' },
        api: getUserListByWorkstationId,
        labelField: 'nickname',
        valueField: 'id',
        mode: 'multiple',
      },
      dependencies: {
        triggerFields: ['workstationId'],
        componentProps: (values) => ({
          params: { workstationId: values.workstationId },
          disabled: !values.workstationId,
          placeholder: values.workstationId ? '请选择报工人' : '请先选择工作站',
        }),
      },
      rules: z.array(z.number()).min(1, '请选择报工人').default([]),
    },
@@ -500,6 +534,18 @@
async function recalcDuration(formApi?: VbenFormApi) {
  if (!formApi) return;
  const values = await formApi.getValues();
  if (values.workstationId) {
    try {
      const users = await getUserListByWorkstationId({ workstationId: values.workstationId });
      if (!users || users.length === 0) {
        message.warning('当前工作站没有配置人力资源');
      }
    } catch {
      // ignore
    }
  }
  if (!values.workstationId || !values.quantity) return;
  try {
    const res = await calculateTaskDuration(values.workstationId, values.quantity);
src/views/mes/pro/task/index.vue
@@ -11,17 +11,16 @@
  MesProWorkOrderTypeEnum,
} from '@vben/constants';
import { Button, Card, message, Tabs } from 'ant-design-vue';
import { Button, Card, Progress, Tabs } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { getGanttTaskList, previewAutoGenerate, autoGenerateTasks } from '#/api/mes/pro/task';
import { getGanttTaskList } from '#/api/mes/pro/task';
import { getWorkOrderPage } from '#/api/mes/pro/workorder';
import ArchiveDetail from '#/views/mes/pd/archive/modules/detail.vue';
import { GanttChart } from './components';
import { useGridColumns, useGridFormSchema } from './data';
import ScheduleForm from './modules/schedule-form.vue';
import SchedulePreview from '../workorder-center/modules/schedule-preview.vue';
const router = useRouter();
const ganttTasks = ref<any[]>([]); // 甘特图预览数据
@@ -35,10 +34,6 @@
  destroyOnClose: true,
});
const [SchedulePreviewModal, schedulePreviewModalApi] = useVbenModal({
  connectedComponent: SchedulePreview,
  destroyOnClose: true,
});
/** 刷新表格 */
function handleRefresh() {
@@ -65,28 +60,6 @@
}
/** 一键排产预览 */
async function handleAutoSchedulePreview(row: MesProWorkOrderApi.WorkOrder) {
  try {
    const preview = await previewAutoGenerate({ workOrderId: row.id! });
    schedulePreviewModalApi
      .setData({ workOrder: row, preview })
      .open();
  } catch {
    message.error('获取排产预览失败');
  }
}
/** 一键排产执行 */
async function handleAutoSchedule(row: MesProWorkOrderApi.WorkOrder) {
  try {
    const result = await autoGenerateTasks({ workOrderId: row.id! });
    message.success(`排产成功,生成 ${result.taskIds?.length || 0} 个任务`);
    handleRefresh();
  } catch {
    message.error('排产失败');
  }
}
/** 打开归档详情 */
function handleArchive(row: MesProWorkOrderApi.WorkOrder) {
  archiveProductCode.value = row.productCode || '';
@@ -151,10 +124,11 @@
<template>
  <Page auto-content-height>
    <ScheduleModal @success="handleRefresh" />
    <SchedulePreviewModal @success="handleRefresh" />
    <!-- 排产甘特图预览 -->
    <Card title="排产甘特图" class="mb-4">
      <template #extra>
        <span class="text-xs text-gray-400">展示已确认自制订单的任务计划</span>
      </template>
      <GanttChart :height="350" :readonly="true" :tasks="ganttTasks" />
    </Card>
@@ -186,11 +160,17 @@
          {{ row.code }}
        </Button>
      </template>
      <template #progressPercent="{ row }">
        <Progress
          :percent="Math.min(100, Math.round((row.quantity ? ((row.quantityProduced || 0) / row.quantity) * 100 : 0)))"
          size="small"
        />
      </template>
      <template #actions="{ row }">
        <TableAction
          :actions="[
            {
              label: '排产',
              label: '排产维护',
              type: 'link',
              auth: ['mes:pro-task:create'],
              ifShow: row.status === MesProWorkOrderStatusEnum.CONFIRMED,
src/views/mes/pro/task/modules/schedule-form.vue
@@ -132,6 +132,7 @@
          v-for="rp in routeProcessList"
          :key="rp.processId"
          :title="rp.processName"
          :description="rp.paramTemplateId ? `参数模板 #${rp.paramTemplateId}` : '未配置参数模板'"
        />
      </Steps>
      <template v-for="(rp, index) in routeProcessList" :key="rp.processId">
src/views/mes/pro/task/modules/task-form.vue
@@ -1,4 +1,4 @@
<script lang="ts" setup>
<script lang="ts" setup>
import type { MesProTaskApi } from '#/api/mes/pro/task';
import { computed, ref } from 'vue';
@@ -9,7 +9,6 @@
import { useVbenForm } from '#/adapter/form';
import { createTask, getTask, updateTask } from '#/api/mes/pro/task';
import { getWorkOrder } from '#/api/mes/pro/workorder';
import { $t } from '#/locales';
import { useTaskFormSchema } from '../data';
@@ -24,7 +23,6 @@
  routeId?: number;
  workOrderId?: number;
}>({}); // 新增任务时的订单 / 工序上下文
const feedbackRole = ref<string>();
const getTitle = computed(() => {
  return formData.value?.id
@@ -113,16 +111,7 @@
      });
    }
    if (wid) {
      try {
        const wo = await getWorkOrder(wid);
        feedbackRole.value = wo.feedbackRole;
      } catch {
        // ignore
      }
    }
    formApi.setState({ schema: useTaskFormSchema(formApi, workOrderQuantity, feedbackRole) });
    formApi.setState({ schema: useTaskFormSchema(formApi, workOrderQuantity) });
  },
});
</script>
src/views/mes/pro/task/modules/task-list.vue
@@ -14,6 +14,7 @@
import { useTaskGridColumns } from '../data';
import TaskForm from './task-form.vue';
// import QuickFeedbackForm from '../../workorder-center/modules/quick-feedback.vue'; // 报工操作暂隐藏
const props = defineProps<{
  colorCode?: string;
@@ -31,6 +32,11 @@
  connectedComponent: TaskForm,
  destroyOnClose: true,
});
// const [QuickFeedbackModal, quickFeedbackModalApi] = useVbenModal({
//   connectedComponent: QuickFeedbackForm,
//   destroyOnClose: true,
// });
/** 刷新表格 */
function handleRefresh() {
@@ -55,6 +61,18 @@
function handleEdit(row: MesProTaskApi.Task) {
  taskFormModalApi.setData({ id: row.id }).open();
}
// /** 快速报工 */
// function handleQuickFeedback(row: MesProTaskApi.Task) {
//   quickFeedbackModalApi
//     .setData({
//       taskId: row.id,
//       taskCode: row.code,
//       taskQuantity: row.quantity,
//       taskProducedQuantity: row.producedQuantity,
//     })
//     .open();
// }
/** 删除任务 */
async function handleDelete(row: MesProTaskApi.Task) {
@@ -107,7 +125,7 @@
// 工序步骤切换时重新加载当前工序的任务
watch(
  () => props.processId,
  () => [props.workOrderId, props.routeId, props.processId],
  () => handleRefresh(),
);
@@ -117,6 +135,7 @@
<template>
  <div>
    <TaskFormModal @success="handleRefresh" />
    <!-- <QuickFeedbackModal @success="handleRefresh" /> -->
    <Grid table-title="生产任务">
      <template v-if="editable" #toolbar-tools>
        <TableAction
@@ -140,6 +159,13 @@
      <template #actions="{ row }">
        <TableAction
          :actions="[
            // {
            //   label: '报工',
            //   type: 'link',
            //   auth: ['mes:pro-feedback:create'],
            //   ifShow: (row.quantity ?? 0) > (row.producedQuantity ?? 0),
            //   onClick: handleQuickFeedback.bind(null, row),
            // },
            {
              label: $t('common.edit'),
              type: 'link',
src/views/mes/pro/workorder/data.ts
@@ -237,20 +237,20 @@
      },
      rules: 'required',
    },
    {
      fieldName: 'feedbackRole',
      label: '报工角色',
      component: 'ApiSelect',
      componentProps: {
        api: getSimpleRoleList,
        disabled: headerReadonly,
        labelField: 'name',
        valueField: 'code',
        mode: 'multiple',
        placeholder: '请选择报工角色',
      },
      rules: 'selectRequired',
    },
    // {
    //   fieldName: 'feedbackRole',
    //   label: '报工角色',
    //   component: 'ApiSelect',
    //   componentProps: {
    //     api: getSimpleRoleList,
    //     disabled: headerReadonly,
    //     labelField: 'name',
    //     valueField: 'code',
    //     mode: 'multiple',
    //     placeholder: '请选择报工角色',
    //   },
    //   rules: 'selectRequired',
    // },
    {
      fieldName: 'feedbackApprove',
      label: '是否报工审批',
src/views/mes/pro/workorder/index.vue
@@ -32,7 +32,8 @@
    destroyOnClose: true,
  });
  const archiveDetailRef = ref<InstanceType<typeof ArchiveDetail>>();
  const archiveVisible = ref(false);
  const archiveProductCode = ref('');
// const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 条码详情弹窗
  /** 刷新表格 */
@@ -100,6 +101,12 @@
    await cancelWorkOrder(row.id!);
    message.success("订单已取消");
    handleRefresh();
  }
  /** 打开归档详情 */
  function handleArchive(row: MesProWorkOrderApi.WorkOrder) {
    archiveProductCode.value = row.productCode || '';
    archiveVisible.value = true;
  }
  /** 查看订单条码 */
@@ -237,7 +244,7 @@
              },
            },
            {
              label: $t('common.create'),
              label: '新增子订单',
              type: 'link',
              auth: ['mes:pro-work-order:create'],
              ifShow:
@@ -274,13 +281,13 @@
            {
              label: '归档',
              type: 'link',
              onClick: () => archiveDetailRef.value?.open(row.productCode),
              onClick: handleArchive.bind(null, row),
            },
          ]" />
      </template>
    </Grid>
    <!-- <BarcodeDetail ref="barcodeDetailRef" /> -->
    <ArchiveDetail ref="archiveDetailRef" />
    <ArchiveDetail :visible="archiveVisible" :product-code="archiveProductCode" @update:visible="archiveVisible = $event" />
  </Page>
</template>