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 emit = defineEmits(['success']);
const formType = ref<FormType>('create'); const formType = ref<FormType>('create');
const subTabsName = ref('machinery'); const subTabsName = ref('machinery');
const checkPlanTabItems = [
{ key: 'machinery', label: '设备' },
{ key: 'subject', label: '项目' },
];
const formData = ref<MesDvCheckPlanApi.CheckPlan>(); const formData = ref<MesDvCheckPlanApi.CheckPlan>();
const isDetail = computed(() => formType.value === 'detail'); const isDetail = computed(() => formType.value === 'detail');
const getTitle = computed(() => { const getTitle = computed(() => {
@ -105,14 +109,22 @@ const [Modal, modalApi] = useVbenModal({
<Tabs <Tabs
v-if="formType !== 'create' && formData?.id" v-if="formType !== 'create' && formData?.id"
v-model:active-key="subTabsName" v-model:active-key="subTabsName"
:items="checkPlanTabItems"
class="mx-4 mt-4" class="mx-4 mt-4"
> >
<Tabs.TabPane key="machinery" tab="设备"> <template #contentRender="{ item }">
<MachineryList :form-type="formType" :plan-id="formData.id" /> <MachineryList
</Tabs.TabPane> v-if="item.key === 'machinery'"
<Tabs.TabPane key="subject" tab="项目"> :form-type="formType"
<SubjectList :form-type="formType" :plan-id="formData.id" :plan-type="formData.type" /> :plan-id="formData.id"
</Tabs.TabPane> />
<SubjectList
v-else-if="item.key === 'subject'"
:form-type="formType"
:plan-id="formData.id"
:plan-type="formData.type"
/>
</template>
</Tabs> </Tabs>
</Modal> </Modal>
</template> </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 emit = defineEmits(['success']);
const formType = ref<FormType>('create'); // 表单模式 const formType = ref<FormType>('create'); // 表单模式
const subTabsName = ref('check'); // 当前资源页签 const subTabsName = ref('check'); // 当前资源页签
const machineryTabItems = [
{ key: 'check', label: '点检记录' },
{ key: 'mainten', label: '保养记录' },
{ key: 'repair', label: '维修记录' },
];
const formData = ref<MesDvMachineryApi.Machinery>(); const formData = ref<MesDvMachineryApi.Machinery>();
const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 条码详情弹窗 const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 条码详情弹窗
const isDetail = computed(() => formType.value === 'detail'); // 是否查看模式 const isDetail = computed(() => formType.value === 'detail'); // 是否查看模式
@ -116,17 +121,23 @@ const [Modal, modalApi] = useVbenModal({
<Tabs <Tabs
v-if="formType !== 'create' && formData?.id" v-if="formType !== 'create' && formData?.id"
v-model:active-key="subTabsName" v-model:active-key="subTabsName"
:items="machineryTabItems"
class="mx-4 mt-4" class="mx-4 mt-4"
> >
<Tabs.TabPane key="check" tab="点检记录"> <template #contentRender="{ item }">
<CheckRecordList :machinery-id="formData.id" /> <CheckRecordList
</Tabs.TabPane> v-if="item.key === 'check'"
<Tabs.TabPane key="mainten" tab="保养记录"> :machinery-id="formData.id"
<MaintenRecordList :machinery-id="formData.id" /> />
</Tabs.TabPane> <MaintenRecordList
<Tabs.TabPane key="repair" tab="维修记录"> v-else-if="item.key === 'mainten'"
<RepairList :machinery-id="formData.id" /> :machinery-id="formData.id"
</Tabs.TabPane> />
<RepairList
v-else-if="item.key === 'repair'"
:machinery-id="formData.id"
/>
</template>
</Tabs> </Tabs>
<template #prepend-footer> <template #prepend-footer>
<div class="flex flex-auto items-center"> <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( const currentItemOrProduct = computed(
() => formData.value?.itemOrProduct || '', () => 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({ const [Form, formApi] = useVbenForm({
commonConfig: { commonConfig: {
@ -128,27 +135,36 @@ const [Modal, modalApi] = useVbenModal({
<Tabs <Tabs
v-if="formType !== 'create' && formData?.id" v-if="formType !== 'create' && formData?.id"
v-model:active-key="subTabsName" v-model:active-key="subTabsName"
:items="itemTabItems"
class="mx-4 mt-4" class="mx-4 mt-4"
> >
<Tabs.TabPane key="bom" tab="BOM 组成"> <template #contentRender="{ item }">
<ProductBomForm :form-type="formType" :item-id="formData.id" /> <ProductBomForm
</Tabs.TabPane> v-if="item.key === 'bom'"
<Tabs.TabPane v-if="formData.batchFlag" key="batch" tab="批次属性"> :form-type="formType"
:item-id="formData.id"
/>
<ItemBatchConfigForm <ItemBatchConfigForm
v-else-if="item.key === 'batch'"
:form-type="formType" :form-type="formType"
:item-id="formData.id" :item-id="formData.id"
:item-or-product="currentItemOrProduct" :item-or-product="currentItemOrProduct"
/> />
</Tabs.TabPane> <Empty
<Tabs.TabPane key="substitute" tab="替代品"> v-else-if="item.key === 'substitute'"
<Empty description="替代品（待实现）" /> description="替代品（待实现）"
</Tabs.TabPane> />
<Tabs.TabPane key="sip" tab="SIP"> <ProductSipForm
<ProductSipForm :form-type="formType" :item-id="formData.id" /> v-else-if="item.key === 'sip'"
</Tabs.TabPane> :form-type="formType"
<Tabs.TabPane key="sop" tab="SOP"> :item-id="formData.id"
<ProductSopForm :form-type="formType" :item-id="formData.id" /> />
</Tabs.TabPane> <ProductSopForm
v-else-if="item.key === 'sop'"
:form-type="formType"
:item-id="formData.id"
/>
</template>
</Tabs> </Tabs>
<template #prepend-footer> <template #prepend-footer>
<div class="flex flex-auto items-center"> <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 emit = defineEmits(['success']);
const formType = ref<FormType>('create'); // 表单模式 const formType = ref<FormType>('create'); // 表单模式
const subTabsName = ref('machine'); // 当前资源页签 const subTabsName = ref('machine'); // 当前资源页签
const workstationTabItems = [
{ key: 'machine', label: '设备资源' },
{ key: 'tool', label: '工装夹具' },
{ key: 'worker', label: '人力资源' },
];
const formData = ref<MesMdWorkstationApi.Workstation>(); const formData = ref<MesMdWorkstationApi.Workstation>();
const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 条码详情弹窗 const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 条码详情弹窗
@ -127,17 +132,26 @@ const [Modal, modalApi] = useVbenModal({
<Tabs <Tabs
v-if="formType !== 'create' && formData?.id" v-if="formType !== 'create' && formData?.id"
v-model:active-key="subTabsName" v-model:active-key="subTabsName"
:items="workstationTabItems"
class="mx-4 mt-4" class="mx-4 mt-4"
> >
<Tabs.TabPane key="machine" tab="设备资源"> <template #contentRender="{ item }">
<MachineList :form-type="formType" :workstation-id="formData.id" /> <MachineList
</Tabs.TabPane> v-if="item.key === 'machine'"
<Tabs.TabPane key="tool" tab="工装夹具"> :form-type="formType"
<ToolList :form-type="formType" :workstation-id="formData.id" /> :workstation-id="formData.id"
</Tabs.TabPane> />
<Tabs.TabPane key="worker" tab="人力资源"> <ToolList
<WorkerList :form-type="formType" :workstation-id="formData.id" /> v-else-if="item.key === 'tool'"
</Tabs.TabPane> :form-type="formType"
:workstation-id="formData.id"
/>
<WorkerList
v-else-if="item.key === 'worker'"
:form-type="formType"
:workstation-id="formData.id"
/>
</template>
</Tabs> </Tabs>
<template #prepend-footer> <template #prepend-footer>
<div class="flex flex-auto items-center"> <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.PREPARE &&
formData.value?.status !== MesProFeedbackStatusEnum.APPROVING, formData.value?.status !== MesProFeedbackStatusEnum.APPROVING,
); );
const feedbackTabItems = [
{ key: 'itemConsume', label: 'BOM 物资消耗' },
{ key: 'productProduce', label: '产品产出' },
];
const getTitle = computed(() => { const getTitle = computed(() => {
if (formType.value === 'detail') { if (formType.value === 'detail') {
return $t('ui.actionTitle.view', ['生产报工']); return $t('ui.actionTitle.view', ['生产报工']);
@ -274,15 +278,20 @@ const [Modal, modalApi] = useVbenModal({
<Tabs <Tabs
v-if="showSubTabs" v-if="showSubTabs"
v-model:active-key="subTabsName" v-model:active-key="subTabsName"
:items="feedbackTabItems"
type="card" type="card"
class="mx-4 mt-2" class="mx-4 mt-2"
> >
<Tabs.TabPane key="itemConsume" tab="BOM 物资消耗"> <template #contentRender="{ item }">
<ItemConsumeList :feedback-id="formData!.id!" /> <ItemConsumeList
</Tabs.TabPane> v-if="item.key === 'itemConsume'"
<Tabs.TabPane key="productProduce" tab="产品产出"> :feedback-id="formData!.id!"
<ProductProduceList :feedback-id="formData!.id!" /> />
</Tabs.TabPane> <ProductProduceList
v-else-if="item.key === 'productProduce'"
:feedback-id="formData!.id!"
/>
</template>
</Tabs> </Tabs>
<template #prepend-footer> <template #prepend-footer>
<div class="flex flex-auto items-center justify-end gap-2"> <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 formData = ref<MesProWorkOrderApi.WorkOrder>();
const originalSnapshot = ref(''); // 表单原始数据快照，用于确认时跳过未变更的保存请求 const originalSnapshot = ref(''); // 表单原始数据快照，用于确认时跳过未变更的保存请求
const subTabsName = ref('bom'); // 当前选中的子表 Tab const subTabsName = ref('bom'); // 当前选中的子表 Tab
const workOrderTabItems = [
{ key: 'bom', label: '工单 BOM' },
{ key: 'item', label: '物料需求' },
];
const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 条码详情弹窗 const barcodeDetailRef = ref<InstanceType<typeof BarcodeDetail>>(); // 条码详情弹窗
const isEditable = computed(() => // 是否为编辑模式（可保存） const isEditable = computed(() => // 是否为编辑模式（可保存）
@ -252,18 +256,24 @@ const [Modal, modalApi] = useVbenModal({
<Form class="mx-4" /> <Form class="mx-4" />
<!-- BOM / 物料需求 Tab：非新建态展示 --> <!-- BOM / 物料需求 Tab：非新建态展示 -->
<template v-if="formData?.id"> <template v-if="formData?.id">
<Tabs v-model:active-key="subTabsName" class="mx-4"> <Tabs
<Tabs.TabPane key="bom" tab="工单 BOM"> v-model:active-key="subTabsName"
:items="workOrderTabItems"
class="mx-4"
>
<template #contentRender="{ item }">
<BomList <BomList
v-if="item.key === 'bom'"
:form-type="formType" :form-type="formType"
:work-order="formData" :work-order="formData"
:work-order-id="formData.id" :work-order-id="formData.id"
@generate-work-order="handleGenerateWorkOrder" @generate-work-order="handleGenerateWorkOrder"
/> />
</Tabs.TabPane> <ItemList
<Tabs.TabPane key="item" tab="物料需求"> v-else-if="item.key === 'item'"
<ItemList :work-order-id="formData.id" /> :work-order-id="formData.id"
</Tabs.TabPane> />
</template>
</Tabs> </Tabs>
</template> </template>
<template #prepend-footer> <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 formType = ref<FormType>('create');
const formData = ref<MesWmPackageApi.Package>(); const formData = ref<MesWmPackageApi.Package>();
const subTabsName = ref('subPackage'); // 子表当前 tab const subTabsName = ref('subPackage'); // 子表当前 tab
const packageTabItems = [
{ key: 'subPackage', label: '子箱' },
{ key: 'packageLine', label: '装箱清单' },
];
const originalSnapshot = ref(''); // 表单原始数据快照，用于 finish 时跳过未变更的保存请求 const originalSnapshot = ref(''); // 表单原始数据快照，用于 finish 时跳过未变更的保存请求
const isEditable = computed(() => const isEditable = computed(() =>
@ -173,14 +177,21 @@ const [Modal, modalApi] = useVbenModal({
<Tabs <Tabs
v-if="formData?.id" v-if="formData?.id"
v-model:active-key="subTabsName" v-model:active-key="subTabsName"
:items="packageTabItems"
class="mx-4 mt-4" class="mx-4 mt-4"
> >
<Tabs.TabPane key="subPackage" tab="子箱"> <template #contentRender="{ item }">
<SubPackageList :editable="isEditable" :package-id="formData.id" /> <SubPackageList
</Tabs.TabPane> v-if="item.key === 'subPackage'"
<Tabs.TabPane key="packageLine" tab="装箱清单"> :editable="isEditable"
<PackageLineList :editable="isEditable" :package-id="formData.id" /> :package-id="formData.id"
</Tabs.TabPane> />
<PackageLineList
v-else-if="item.key === 'packageLine'"
:editable="isEditable"
:package-id="formData.id"
/>
</template>
</Tabs> </Tabs>
<template #prepend-footer> <template #prepend-footer>
<div class="flex flex-auto items-center gap-2"> <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 &&
formData.value.status !== MesWmStockTakingTaskStatusEnum.PREPARE), formData.value.status !== MesWmStockTakingTaskStatusEnum.PREPARE),
); );
const stockTakingTabItems = computed(() => [
...(showLineTab.value ? [{ key: 'lines', label: '盘点清单' }] : []),
...(showResultTab.value ? [{ key: 'results', label: '盘点结果' }] : []),
]);
const getTitle = computed(() => { const getTitle = computed(() => {
if (formType.value === 'detail') { if (formType.value === 'detail') {
return $t('ui.actionTitle.view', ['盘点任务']); return $t('ui.actionTitle.view', ['盘点任务']);
@ -191,18 +195,22 @@ const [Modal, modalApi] = useVbenModal({
<Tabs <Tabs
v-if="formData?.id" v-if="formData?.id"
v-model:active-key="subTabsName" v-model:active-key="subTabsName"
:items="stockTakingTabItems"
class="mx-4 mt-4" class="mx-4 mt-4"
type="card" type="card"
> >
<Tabs.TabPane v-if="showLineTab" key="lines" tab="盘点清单"> <template #contentRender="{ item }">
<LineList :form-type="formType" :task-id="formData.id" /> <LineList
</Tabs.TabPane> v-if="item.key === 'lines'"
<Tabs.TabPane v-if="showResultTab" key="results" tab="盘点结果"> :form-type="formType"
:task-id="formData.id"
/>
<ResultList <ResultList
v-else-if="item.key === 'results'"
:form-type="isExecute ? 'execute' : 'detail'" :form-type="isExecute ? 'execute' : 'detail'"
:task-id="formData.id" :task-id="formData.id"
/> />
</Tabs.TabPane> </template>
</Tabs> </Tabs>
<template #prepend-footer> <template #prepend-footer>
<div class="flex flex-auto items-center gap-2"> <div class="flex flex-auto items-center gap-2">