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:12:19 +08:00
parent b02d602a21
commit 13acbdd556
11 changed files with 129 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
apps/web-antdv-next/src/views/mes/cal/calendar/index.vue
View File

@ -15,6 +15,11 @@ import 'dayjs/locale/zh-cn';
dayjs.locale('zh-cn');
const activeTab = ref<string>('type');
const calendarTabItems = [
{ key: 'type', label: '按分类', forceRender: true },
{ key: 'team', label: '按班组', forceRender: true },
{ key: 'user', label: '按个人', forceRender: true },
];
</script>
<template>
@ -26,16 +31,12 @@ const activeTab = ref<string>('type');
/>
</template>
<div class="bg-card rounded-md p-3">
<Tabs v-model:active-key="activeTab" type="card">
<Tabs.TabPane key="type" tab="按分类" force-render>
<TypeView />
</Tabs.TabPane>
<Tabs.TabPane key="team" tab="按班组" force-render>
<TeamView />
</Tabs.TabPane>
<Tabs.TabPane key="user" tab="按个人" force-render>
<UserView />
</Tabs.TabPane>
<Tabs v-model:active-key="activeTab" :items="calendarTabItems" type="card">
<template #contentRender="{ item }">
<TypeView v-if="item.key === 'type'" />
<TeamView v-else-if="item.key === 'team'" />
<UserView v-else-if="item.key === 'user'" />
</template>
</Tabs>
</div>
</Page>

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

@ -21,6 +21,10 @@ import PlanTeamList from './team-list.vue';
const emit = defineEmits(['success']);
const formType = ref<FormType>('create'); // 表单模式
const subTabsName = ref('shift'); // 当前资源页签
const planTabItems = [
{ key: 'shift', label: '班次' },
{ key: 'team', label: '班组' },
];
const formData = ref<MesCalPlanApi.Plan>();
const isDetail = computed(() => formType.value === 'detail'); // 是否查看模式
const canConfirm = computed(
@ -131,14 +135,21 @@ const [Modal, modalApi] = useVbenModal({
<Tabs
v-if="formType !== 'create' && formData?.id"
v-model:active-key="subTabsName"
:items="planTabItems"
class="mx-4 mt-4"
>
<Tabs.TabPane key="shift" tab="班次">
<ShiftList :form-type="formType" :plan-id="formData.id" />
</Tabs.TabPane>
<Tabs.TabPane key="team" tab="班组">
<PlanTeamList :form-type="formType" :plan-id="formData.id" />
</Tabs.TabPane>
<template #contentRender="{ item }">
<ShiftList
v-if="item.key === 'shift'"
:form-type="formType"
:plan-id="formData.id"
/>
<PlanTeamList
v-else-if="item.key === 'team'"
:form-type="formType"
:plan-id="formData.id"
/>
</template>
</Tabs>
<template #prepend-footer>
<div class="flex flex-auto items-center">

12
apps/web-antdv-next/src/views/mes/cal/team/modules/form.vue
View File

@ -20,6 +20,7 @@ import MemberList from './member-list.vue';
const emit = defineEmits(['success']);
const formType = ref<FormType>('create'); // 表单模式
const subTabsName = ref('member'); // 当前资源页签
const teamTabItems = [{ key: 'member', label: '班组成员' }];
const formData = ref<MesCalTeamApi.Team>();
const isDetail = computed(() => formType.value === 'detail'); // 是否查看模式
const getTitle = computed(() => {
@ -107,11 +108,16 @@ const [Modal, modalApi] = useVbenModal({
<Tabs
v-if="formType !== 'create' && formData?.id"
v-model:active-key="subTabsName"
:items="teamTabItems"
class="mx-4 mt-4"
>
<Tabs.TabPane key="member" tab="班组成员">
<MemberList :form-type="formType" :team-id="formData.id" />
</Tabs.TabPane>
<template #contentRender="{ item }">
<MemberList
v-if="item.key === 'member'"
:form-type="formType"
:team-id="formData.id"
/>
</template>
</Tabs>
</Modal>
</template>

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

@ -20,6 +20,10 @@ import ClientProductSalesList from './product-sales-list.vue';
const emit = defineEmits(['success']);
const formType = ref<FormType>('create'); // 表单模式
const subTabsName = ref('productSalesLine'); // 当前子表页签
const clientTabItems = [
{ key: 'productSalesLine', label: '产品清单' },
{ key: 'productSales', label: '销售记录' },
];
const formData = ref<MesMdClientApi.Client>();
const isDetail = computed(() => formType.value === 'detail'); // 是否查看模式
@ -100,14 +104,19 @@ const [Modal, modalApi] = useVbenModal({
<Tabs
v-if="formType !== 'create' && formData?.id"
v-model:active-key="subTabsName"
:items="clientTabItems"
class="mx-4 mt-4"
>
<Tabs.TabPane key="productSalesLine" tab="产品清单">
<ClientProductSalesLineList :client-id="formData.id" />
</Tabs.TabPane>
<Tabs.TabPane key="productSales" tab="销售记录">
<ClientProductSalesList :client-id="formData.id" />
</Tabs.TabPane>
<template #contentRender="{ item }">
<ClientProductSalesLineList
v-if="item.key === 'productSalesLine'"
:client-id="formData.id"
/>
<ClientProductSalesList
v-else-if="item.key === 'productSales'"
:client-id="formData.id"
/>
</template>
</Tabs>
</Modal>
</template>

21
apps/web-antdv-next/src/views/mes/md/vendor/modules/form.vue vendored
View File

@ -20,6 +20,10 @@ import VendorItemReceiptList from './item-receipt-list.vue';
const emit = defineEmits(['success']);
const formType = ref<FormType>('create'); // 表单模式
const subTabsName = ref('itemReceiptLine'); // 当前子表页签
const vendorTabItems = [
{ key: 'itemReceiptLine', label: '物料清单' },
{ key: 'itemReceipt', label: '采购记录' },
];
const formData = ref<MesMdVendorApi.Vendor>();
const isDetail = computed(() => formType.value === 'detail'); // 是否查看模式
@ -102,14 +106,19 @@ const [Modal, modalApi] = useVbenModal({
<Tabs
v-if="formType !== 'create' && formData?.id"
v-model:active-key="subTabsName"
:items="vendorTabItems"
class="mx-4 mt-4"
>
<Tabs.TabPane key="itemReceiptLine" tab="物料清单">
<VendorItemReceiptLineList :vendor-id="formData.id" />
</Tabs.TabPane>
<Tabs.TabPane key="itemReceipt" tab="采购记录">
<VendorItemReceiptList :vendor-id="formData.id" />
</Tabs.TabPane>
<template #contentRender="{ item }">
<VendorItemReceiptLineList
v-if="item.key === 'itemReceiptLine'"
:vendor-id="formData.id"
/>
<VendorItemReceiptList
v-else-if="item.key === 'itemReceipt'"
:vendor-id="formData.id"
/>
</template>
</Tabs>
</Modal>
</template>

23
apps/web-antdv-next/src/views/mes/qc/batchtrace/modules/trace-detail.vue
View File

@ -14,6 +14,10 @@ import TraceList from './trace-list.vue';
const detailData = ref<MesWmBatchApi.Batch>(); // 当前批次详情
const subTabsName = ref<'backward' | 'forward'>('forward'); // 当前激活的追溯方向
const traceTabItems = [
{ key: 'forward', label: '向前追溯' },
{ key: 'backward', label: '向后追溯' },
];
const [Descriptions] = useDescription({
bordered: true,
@ -44,15 +48,22 @@ const [Modal, modalApi] = useVbenModal({
<Tabs
v-if="detailData?.code"
v-model:active-key="subTabsName"
:items="traceTabItems"
class="mx-4 mt-4"
type="card"
>
<Tabs.TabPane key="forward" tab="向前追溯">
<TraceList :batch-code="detailData.code" direction="forward" />
</Tabs.TabPane>
<Tabs.TabPane key="backward" tab="向后追溯">
<TraceList :batch-code="detailData.code" direction="backward" />
</Tabs.TabPane>
<template #contentRender="{ item }">
<TraceList
v-if="item.key === 'forward'"
:batch-code="detailData.code"
direction="forward"
/>
<TraceList
v-else-if="item.key === 'backward'"
:batch-code="detailData.code"
direction="backward"
/>
</template>
</Tabs>
</Modal>
</template>

13
apps/web-antdv-next/src/views/mes/qc/ipqc/modules/form.vue
View File

@ -27,6 +27,10 @@ const emit = defineEmits(['success']);
const formType = ref<FormType>('create');
const formData = ref<MesQcIpqcApi.Ipqc>();
const subTabsName = ref('line');
const qcTabItems = [
{ key: 'line', label: '检验项' },
{ key: 'result', label: '检测结果' },
];
const originalSnapshot = ref(''); // 表单原始数据快照，用于 finish 时跳过未变更的保存请求
const isDetail = computed(() => formType.value === 'detail');
const canFinish = computed(
@ -211,22 +215,23 @@ const [Modal, modalApi] = useVbenModal({
<Tabs
v-if="formData?.id"
v-model:active-key="subTabsName"
:items="qcTabItems"
class="mx-4 mt-4"
>
<Tabs.TabPane key="line" tab="检验项">
<template #contentRender="{ item }">
<LineList
v-if="item.key === 'line'"
:form-type="formType"
:ipqc-id="formData.id"
@refresh="handleRefresh"
/>
</Tabs.TabPane>
<Tabs.TabPane key="result" tab="检测结果">
<QcIndicatorResultList
v-else-if="item.key === 'result'"
:qc-id="formData.id"
:qc-type="MesQcTypeEnum.IPQC"
:readonly="isDetail"
/>
</Tabs.TabPane>
</template>
</Tabs>
<template #prepend-footer>
<div class="flex flex-auto items-center gap-2">

13
apps/web-antdv-next/src/views/mes/qc/iqc/modules/form.vue
View File

@ -28,6 +28,10 @@ const emit = defineEmits(['success']);
const formType = ref<FormType>('create');
const formData = ref<MesQcIqcApi.Iqc>();
const subTabsName = ref('line');
const qcTabItems = [
{ key: 'line', label: '检验项' },
{ key: 'result', label: '检测结果' },
];
const originalSnapshot = ref(''); // 表单原始数据快照，用于 finish 时跳过未变更的保存请求
const isDetail = computed(() => formType.value === 'detail');
const canFinish = computed(
@ -213,22 +217,23 @@ const [Modal, modalApi] = useVbenModal({
<Tabs
v-if="formData?.id"
v-model:active-key="subTabsName"
:items="qcTabItems"
class="mx-4 mt-4"
>
<Tabs.TabPane key="line" tab="检验项">
<template #contentRender="{ item }">
<LineList
v-if="item.key === 'line'"
:form-type="formType"
:iqc-id="formData.id"
@refresh="handleRefresh"
/>
</Tabs.TabPane>
<Tabs.TabPane key="result" tab="检测结果">
<QcIndicatorResultList
v-else-if="item.key === 'result'"
:qc-id="formData.id"
:qc-type="MesQcTypeEnum.IQC"
:readonly="isDetail"
/>
</Tabs.TabPane>
</template>
</Tabs>
<template #prepend-footer>
<div class="flex flex-auto items-center gap-2">

13
apps/web-antdv-next/src/views/mes/qc/oqc/modules/form.vue
View File

@ -27,6 +27,10 @@ const emit = defineEmits(['success']);
const formType = ref<FormType>('create');
const formData = ref<MesQcOqcApi.Oqc>();
const subTabsName = ref('line');
const qcTabItems = [
{ key: 'line', label: '检验项' },
{ key: 'result', label: '检测结果' },
];
const originalSnapshot = ref(''); // 表单原始数据快照，用于 finish 时跳过未变更的保存请求
const isDetail = computed(() => formType.value === 'detail');
const canFinish = computed(
@ -215,22 +219,23 @@ const [Modal, modalApi] = useVbenModal({
<Tabs
v-if="formData?.id"
v-model:active-key="subTabsName"
:items="qcTabItems"
class="mx-4 mt-4"
>
<Tabs.TabPane key="line" tab="检验项">
<template #contentRender="{ item }">
<LineList
v-if="item.key === 'line'"
:form-type="formType"
:oqc-id="formData.id"
@refresh="handleRefresh"
/>
</Tabs.TabPane>
<Tabs.TabPane key="result" tab="检测结果">
<QcIndicatorResultList
v-else-if="item.key === 'result'"
:qc-id="formData.id"
:qc-type="MesQcTypeEnum.OQC"
:readonly="isDetail"
/>
</Tabs.TabPane>
</template>
</Tabs>
<template #prepend-footer>
<div class="flex flex-auto items-center gap-2">

13
apps/web-antdv-next/src/views/mes/qc/rqc/modules/form.vue
View File

@ -27,6 +27,10 @@ const emit = defineEmits(['success']);
const formType = ref<FormType>('create');
const formData = ref<MesQcRqcApi.Rqc>();
const subTabsName = ref('line');
const qcTabItems = [
{ key: 'line', label: '检验项' },
{ key: 'result', label: '检测结果' },
];
const originalSnapshot = ref(''); // 表单原始数据快照，用于 finish 时跳过未变更的保存请求
const isDetail = computed(() => formType.value === 'detail');
const canFinish = computed(
@ -211,22 +215,23 @@ const [Modal, modalApi] = useVbenModal({
<Tabs
v-if="formData?.id"
v-model:active-key="subTabsName"
:items="qcTabItems"
class="mx-4 mt-4"
>
<Tabs.TabPane key="line" tab="检验项">
<template #contentRender="{ item }">
<LineList
v-if="item.key === 'line'"
:form-type="formType"
:rqc-id="formData.id"
@refresh="handleRefresh"
/>
</Tabs.TabPane>
<Tabs.TabPane key="result" tab="检测结果">
<QcIndicatorResultList
v-else-if="item.key === 'result'"
:qc-id="formData.id"
:qc-type="MesQcTypeEnum.RQC"
:readonly="isDetail"
/>
</Tabs.TabPane>
</template>
</Tabs>
<template #prepend-footer>
<div class="flex flex-auto items-center gap-2">

13
apps/web-antdv-next/src/views/mes/qc/template/modules/form.vue
View File

@ -24,6 +24,10 @@ import ItemList from './item-list.vue';
const emit = defineEmits(['success']);
const formType = ref<FormType>('create'); // 弹窗形态：新增/编辑/详情
const subTabsName = ref('indicator'); // 当前激活的子表 tab
const templateTabItems = [
{ key: 'indicator', label: '检测指标项' },
{ key: 'item', label: '产品关联' },
];
const formData = ref<MesQcTemplateApi.Template>();
const getTitle = computed(() => {
@ -105,20 +109,21 @@ const [Modal, modalApi] = useVbenModal({
<Tabs
v-if="formType !== 'create' && formData?.id"
v-model:active-key="subTabsName"
:items="templateTabItems"
class="mx-4 mt-4"
>
<Tabs.TabPane key="indicator" tab="检测指标项">
<template #contentRender="{ item }">
<IndicatorList
v-if="item.key === 'indicator'"
:readonly="formType === 'detail'"
:template-id="formData.id"
/>
</Tabs.TabPane>
<Tabs.TabPane key="item" tab="产品关联">
<ItemList
v-else-if="item.key === 'item'"
:readonly="formType === 'detail'"
:template-id="formData.id"
/>
</Tabs.TabPane>
</template>
</Tabs>
</Modal>
</template>