yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(web-antdv-next): <Tabs.TabPane> 改成 Tabs :items="xxxTabItems"，使用 items 和 contentRender 迁移 MES 剩余页签

pull/359/head
XuZhiqiang 2026-06-06 22:16:41 +08:00
parent 13acbdd556
commit 4646900de1
8 changed files with 152 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
apps/web-antdv-next/src/views/mes/dv/checkplan/modules/form.vue
View File

@ -21,6 +21,10 @@ import SubjectList from './subject-list.vue';
const emit = defineEmits(['success']);
const formType = ref<FormType>('create');
const subTabsName = ref('machinery');
const checkPlanTabItems = [
{ key: 'machinery', label: '设备' },
{ key: 'subject', label: '项目' },
];
const formData = ref<MesDvCheckPlanApi.CheckPlan>();
const isDetail = computed(() => formType.value === 'detail');
const getTitle = computed(() => {
@ -105,14 +109,22 @@ const [Modal, modalApi] = useVbenModal({
<Tabs
v-if="formType !== 'create' && formData?.id"
v-model:active-key="subTabsName"
:items="checkPlanTabItems"
class="mx-4 mt-4"
>
<Tabs.TabPane key="machinery" tab="设备">
<MachineryList :form-type="formType" :plan-id="formData.id" />
</Tabs.TabPane>
<Tabs.TabPane key="subject" tab="项目">
<SubjectList :form-type="formType" :plan-id="formData.id" :plan-type="formData.type" />
</Tabs.TabPane>
<template #contentRender="{ item }">
<MachineryList
v-if="item.key === 'machinery'"
:form-type="formType"
:plan-id="formData.id"
/>
<SubjectList
v-else-if="item.key === 'subject'"
:form-type="formType"
:plan-id="formData.id"
:plan-type="formData.type"
/>
</template>
</Tabs>
</Modal>
</template>

29
apps/web-antdv-next/src/views/mes/dv/machinery/modules/form.vue
View File

@ -23,6 +23,11 @@ import RepairList from './repair-list.vue';
const emit = defineEmits(['success']);
const formType = ref<FormType>('create'); // 表单模式
const subTabsName = ref('check'); // 当前资源页签
const machineryTabItems = [
{ key: 'check', label: '点检记录' },
{ key: 'mainten', label: '保养记录' },
{ key: 'repair', label: '维修记录' },
];
const formData = ref<MesDvMachineryApi.Machinery>();
const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 条码详情弹窗
const isDetail = computed(() => formType.value === 'detail'); // 是否查看模式
@ -116,17 +121,23 @@ const [Modal, modalApi] = useVbenModal({
<Tabs
v-if="formType !== 'create' && formData?.id"
v-model:active-key="subTabsName"
:items="machineryTabItems"
class="mx-4 mt-4"
>
<Tabs.TabPane key="check" tab="点检记录">
<CheckRecordList :machinery-id="formData.id" />
</Tabs.TabPane>
<Tabs.TabPane key="mainten" tab="保养记录">
<MaintenRecordList :machinery-id="formData.id" />
</Tabs.TabPane>
<Tabs.TabPane key="repair" tab="维修记录">
<RepairList :machinery-id="formData.id" />
</Tabs.TabPane>
<template #contentRender="{ item }">
<CheckRecordList
v-if="item.key === 'check'"
:machinery-id="formData.id"
/>
<MaintenRecordList
v-else-if="item.key === 'mainten'"
:machinery-id="formData.id"
/>
<RepairList
v-else-if="item.key === 'repair'"
:machinery-id="formData.id"
/>
</template>
</Tabs>
<template #prepend-footer>
<div class="flex flex-auto items-center">

44
apps/web-antdv-next/src/views/mes/md/item/modules/form.vue
View File

@ -37,6 +37,13 @@ const getTitle = computed(() => {
const currentItemOrProduct = computed(
() => formData.value?.itemOrProduct || '',
); // 当前物料/产品标识
const itemTabItems = computed(() => [
{ key: 'bom', label: 'BOM 组成' },
...(formData.value?.batchFlag ? [{ key: 'batch', label: '批次属性' }] : []),
{ key: 'substitute', label: '替代品' },
{ key: 'sip', label: 'SIP' },
{ key: 'sop', label: 'SOP' },
]);
const [Form, formApi] = useVbenForm({
commonConfig: {
@ -128,27 +135,36 @@ const [Modal, modalApi] = useVbenModal({
<Tabs
v-if="formType !== 'create' && formData?.id"
v-model:active-key="subTabsName"
:items="itemTabItems"
class="mx-4 mt-4"
>
<Tabs.TabPane key="bom" tab="BOM 组成">
<ProductBomForm :form-type="formType" :item-id="formData.id" />
</Tabs.TabPane>
<Tabs.TabPane v-if="formData.batchFlag" key="batch" tab="批次属性">
<template #contentRender="{ item }">
<ProductBomForm
v-if="item.key === 'bom'"
:form-type="formType"
:item-id="formData.id"
/>
<ItemBatchConfigForm
v-else-if="item.key === 'batch'"
:form-type="formType"
:item-id="formData.id"
:item-or-product="currentItemOrProduct"
/>
</Tabs.TabPane>
<Tabs.TabPane key="substitute" tab="替代品">
<Empty description="替代品（待实现）" />
</Tabs.TabPane>
<Tabs.TabPane key="sip" tab="SIP">
<ProductSipForm :form-type="formType" :item-id="formData.id" />
</Tabs.TabPane>
<Tabs.TabPane key="sop" tab="SOP">
<ProductSopForm :form-type="formType" :item-id="formData.id" />
</Tabs.TabPane>
<Empty
v-else-if="item.key === 'substitute'"
description="替代品（待实现）"
/>
<ProductSipForm
v-else-if="item.key === 'sip'"
:form-type="formType"
:item-id="formData.id"
/>
<ProductSopForm
v-else-if="item.key === 'sop'"
:form-type="formType"
:item-id="formData.id"
/>
</template>
</Tabs>
<template #prepend-footer>
<div class="flex flex-auto items-center">

32
apps/web-antdv-next/src/views/mes/md/workstation/modules/form.vue
View File

@ -27,6 +27,11 @@ import WorkerList from './worker-list.vue';
const emit = defineEmits(['success']);
const formType = ref<FormType>('create'); // 表单模式
const subTabsName = ref('machine'); // 当前资源页签
const workstationTabItems = [
{ key: 'machine', label: '设备资源' },
{ key: 'tool', label: '工装夹具' },
{ key: 'worker', label: '人力资源' },
];
const formData = ref<MesMdWorkstationApi.Workstation>();
const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 条码详情弹窗
@ -127,17 +132,26 @@ const [Modal, modalApi] = useVbenModal({
<Tabs
v-if="formType !== 'create' && formData?.id"
v-model:active-key="subTabsName"
:items="workstationTabItems"
class="mx-4 mt-4"
>
<Tabs.TabPane key="machine" tab="设备资源">
<MachineList :form-type="formType" :workstation-id="formData.id" />
</Tabs.TabPane>
<Tabs.TabPane key="tool" tab="工装夹具">
<ToolList :form-type="formType" :workstation-id="formData.id" />
</Tabs.TabPane>
<Tabs.TabPane key="worker" tab="人力资源">
<WorkerList :form-type="formType" :workstation-id="formData.id" />
</Tabs.TabPane>
<template #contentRender="{ item }">
<MachineList
v-if="item.key === 'machine'"
:form-type="formType"
:workstation-id="formData.id"
/>
<ToolList
v-else-if="item.key === 'tool'"
:form-type="formType"
:workstation-id="formData.id"
/>
<WorkerList
v-else-if="item.key === 'worker'"
:form-type="formType"
:workstation-id="formData.id"
/>
</template>
</Tabs>
<template #prepend-footer>
<div class="flex flex-auto items-center">

21
apps/web-antdv-next/src/views/mes/pro/feedback/modules/form.vue
View File

@ -53,6 +53,10 @@ const showSubTabs = computed(
formData.value?.status !== MesProFeedbackStatusEnum.PREPARE &&
formData.value?.status !== MesProFeedbackStatusEnum.APPROVING,
);
const feedbackTabItems = [
{ key: 'itemConsume', label: 'BOM 物资消耗' },
{ key: 'productProduce', label: '产品产出' },
];
const getTitle = computed(() => {
if (formType.value === 'detail') {
return $t('ui.actionTitle.view', ['生产报工']);
@ -274,15 +278,20 @@ const [Modal, modalApi] = useVbenModal({
<Tabs
v-if="showSubTabs"
v-model:active-key="subTabsName"
:items="feedbackTabItems"
type="card"
class="mx-4 mt-2"
>
<Tabs.TabPane key="itemConsume" tab="BOM 物资消耗">
<ItemConsumeList :feedback-id="formData!.id!" />
</Tabs.TabPane>
<Tabs.TabPane key="productProduce" tab="产品产出">
<ProductProduceList :feedback-id="formData!.id!" />
</Tabs.TabPane>
<template #contentRender="{ item }">
<ItemConsumeList
v-if="item.key === 'itemConsume'"
:feedback-id="formData!.id!"
/>
<ProductProduceList
v-else-if="item.key === 'productProduce'"
:feedback-id="formData!.id!"
/>
</template>
</Tabs>
<template #prepend-footer>
<div class="flex flex-auto items-center justify-end gap-2">

22
apps/web-antdv-next/src/views/mes/pro/workorder/modules/form.vue
View File

@ -34,6 +34,10 @@ const formType = ref<FormType>('create');
const formData = ref<MesProWorkOrderApi.WorkOrder>();
const originalSnapshot = ref(''); // 表单原始数据快照，用于确认时跳过未变更的保存请求
const subTabsName = ref('bom'); // 当前选中的子表 Tab
const workOrderTabItems = [
{ key: 'bom', label: '工单 BOM' },
{ key: 'item', label: '物料需求' },
];
const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 条码详情弹窗
const isEditable = computed(() => // 是否为编辑模式（可保存）
@ -252,18 +256,24 @@ const [Modal, modalApi] = useVbenModal({
<Form class="mx-4" />
<!-- BOM / 物料需求 Tab：非新建态展示 -->
<template v-if="formData?.id">
<Tabs v-model:active-key="subTabsName" class="mx-4">
<Tabs.TabPane key="bom" tab="工单 BOM">
<Tabs
v-model:active-key="subTabsName"
:items="workOrderTabItems"
class="mx-4"
>
<template #contentRender="{ item }">
<BomList
v-if="item.key === 'bom'"
:form-type="formType"
:work-order="formData"
:work-order-id="formData.id"
@generate-work-order="handleGenerateWorkOrder"
/>
</Tabs.TabPane>
<Tabs.TabPane key="item" tab="物料需求">
<ItemList :work-order-id="formData.id" />
</Tabs.TabPane>
<ItemList
v-else-if="item.key === 'item'"
:work-order-id="formData.id"
/>
</template>
</Tabs>
</template>
<template #prepend-footer>

23
apps/web-antdv-next/src/views/mes/wm/packages/modules/form.vue
View File

@ -27,6 +27,10 @@ const emit = defineEmits(['success']);
const formType = ref<FormType>('create');
const formData = ref<MesWmPackageApi.Package>();
const subTabsName = ref('subPackage'); // 子表当前 tab
const packageTabItems = [
{ key: 'subPackage', label: '子箱' },
{ key: 'packageLine', label: '装箱清单' },
];
const originalSnapshot = ref(''); // 表单原始数据快照，用于 finish 时跳过未变更的保存请求
const isEditable = computed(() =>
@ -173,14 +177,21 @@ const [Modal, modalApi] = useVbenModal({
<Tabs
v-if="formData?.id"
v-model:active-key="subTabsName"
:items="packageTabItems"
class="mx-4 mt-4"
>
<Tabs.TabPane key="subPackage" tab="子箱">
<SubPackageList :editable="isEditable" :package-id="formData.id" />
</Tabs.TabPane>
<Tabs.TabPane key="packageLine" tab="装箱清单">
<PackageLineList :editable="isEditable" :package-id="formData.id" />
</Tabs.TabPane>
<template #contentRender="{ item }">
<SubPackageList
v-if="item.key === 'subPackage'"
:editable="isEditable"
:package-id="formData.id"
/>
<PackageLineList
v-else-if="item.key === 'packageLine'"
:editable="isEditable"
:package-id="formData.id"
/>
</template>
</Tabs>
<template #prepend-footer>
<div class="flex flex-auto items-center gap-2">

18
apps/web-antdv-next/src/views/mes/wm/stocktaking/task/modules/form.vue
View File

@ -49,6 +49,10 @@ const showResultTab = computed(
(!!formData.value?.status &&
formData.value.status !== MesWmStockTakingTaskStatusEnum.PREPARE),
);
const stockTakingTabItems = computed(() => [
...(showLineTab.value ? [{ key: 'lines', label: '盘点清单' }] : []),
...(showResultTab.value ? [{ key: 'results', label: '盘点结果' }] : []),
]);
const getTitle = computed(() => {
if (formType.value === 'detail') {
return $t('ui.actionTitle.view', ['盘点任务']);
@ -191,18 +195,22 @@ const [Modal, modalApi] = useVbenModal({
<Tabs
v-if="formData?.id"
v-model:active-key="subTabsName"
:items="stockTakingTabItems"
class="mx-4 mt-4"
type="card"
>
<Tabs.TabPane v-if="showLineTab" key="lines" tab="盘点清单">
<LineList :form-type="formType" :task-id="formData.id" />
</Tabs.TabPane>
<Tabs.TabPane v-if="showResultTab" key="results" tab="盘点结果">
<template #contentRender="{ item }">
<LineList
v-if="item.key === 'lines'"
:form-type="formType"
:task-id="formData.id"
/>
<ResultList
v-else-if="item.key === 'results'"
:form-type="isExecute ? 'execute' : 'detail'"
:task-id="formData.id"
/>
</Tabs.TabPane>
</template>
</Tabs>
<template #prepend-footer>
<div class="flex flex-auto items-center gap-2">