linweidong
/
besure_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

perf：模具组-详情交互优化

Browse Source
main
黄伟杰 6 days ago
parent 13d77d76eb
commit b5caf770ee
3 changed files with 111 additions and 51 deletions
Show Stats Download Patch File Download Diff File

2
src/views/erp/mold/MoldBrandForm.vue
Unescape Escape View File

@ -169,7 +169,7 @@ const resetForm = () => {
productIds: [],
images: '',
version: '',
status: 0,
status: 1,
useTime: 0,
maintainType: undefined,
maintainTime: undefined,

124
src/views/erp/mold/detail/brand.vue
Unescape Escape View File

@ -31,8 +31,8 @@
</div>
<div class="mold-brand-detail__actions">
<el-button @click="goBack"><Icon icon="ep:arrow-left" class="mr-5px" /> {{ t('MoldManagement.MoldBrandDetail.back') }}</el-button>
<el-button type="primary" @click="handleReservedAction(t('MoldManagement.MoldBrandDetail.moldUp'))">{{ t('MoldManagement.MoldBrandDetail.moldUp') }}</el-button>
<el-button type="success" @click="handleReservedAction(t('MoldManagement.MoldBrandDetail.moldDown'))">{{ t('MoldManagement.MoldBrandDetail.moldDown') }}</el-button>
<el-button type="primary" @click="goOperate(1)" v-if="detailData?.status === 1">{{ t('MoldManagement.MoldBrandDetail.moldUp') }}</el-button>
<el-button type="success" @click="goOperate(2)" v-if="detailData?.status === 0">{{ t('MoldManagement.MoldBrandDetail.moldDown') }}</el-button>
<el-button type="warning" @click="handleReservedAction(t('MoldManagement.MoldBrandDetail.repair'))">{{ t('MoldManagement.MoldBrandDetail.repair') }}</el-button>
</div>
</div>
@ -62,6 +62,7 @@
<component :is="MoldListComp" :brand-id="brandId" />
</el-tab-pane>
<el-tab-pane :label="t('MoldManagement.MoldBrandDetail.tabInspection')" name="inspection">
<div v-loading="inspectionLoading">
<el-form :inline="true" class="device-ledger-tab-toolbar">
<el-form-item :label="t('MoldManagement.MoldBrandDetail.time')">
<el-date-picker v-model="inspectionDateRange" type="daterange" value-format="YYYY-MM-DD HH:mm:ss"
@ -113,8 +114,10 @@
</template>
</el-step>
</el-steps>
</div>
</el-tab-pane>
<el-tab-pane :label="t('MoldManagement.MoldBrandDetail.tabRepair')" name="repair">
<div v-loading="repairLoading">
<el-form :inline="true" class="device-ledger-tab-toolbar">
<el-form-item :label="t('MoldManagement.MoldBrandDetail.time')">
<el-date-picker v-model="repairDateRange" type="daterange" value-format="YYYY-MM-DD HH:mm:ss"
@ -168,8 +171,10 @@
</div>
</el-collapse-item>
</el-collapse>
</div>
</el-tab-pane>
<el-tab-pane :label="t('MoldManagement.MoldBrandDetail.tabMaintain')" name="maintain">
<div v-loading="maintainLoading">
<el-form :inline="true" class="device-ledger-tab-toolbar">
<el-form-item :label="t('MoldManagement.MoldBrandDetail.time')">
<el-date-picker v-model="maintainDateRange" type="daterange" value-format="YYYY-MM-DD HH:mm:ss"
@ -221,8 +226,10 @@
</template>
</el-step>
</el-steps>
</div>
</el-tab-pane>
<el-tab-pane :label="t('MoldManagement.MoldBrandDetail.tabInstall')" name="install">
<div v-loading="installLoading">
<el-form :inline="true" class="device-ledger-tab-toolbar">
<el-form-item :label="t('MoldManagement.MoldBrandDetail.mold')"><el-select v-model="installMoldId" filterable clearable :placeholder="t('MoldManagement.MoldBrandDetail.selectMold')"
class="!w-200px"><el-option v-for="item in childMolds" :key="item.id" :label="item.name"
@ -250,6 +257,7 @@
<el-empty v-if="!installRecords.length" :description="t('MoldManagement.MoldBrandDetail.noInstallRecords')" />
<Pagination :total="installTotal" v-model:page="installPageNo" v-model:limit="installPageSize"
@pagination="fetchInstallRecords" />
</div>
</el-tab-pane>
</el-tabs>
</div>
@ -282,6 +290,7 @@ const detailLoading = ref(false)
const detailData = ref<(MoldBrandVO & Record<string, any>) | null>(null)
const childMolds = ref<any[]>([])
const activeTab = ref('molds')
const loadedTabs = ref<Set<string>>(new Set(['molds']))
const inspectionHistory = ref<any[]>([])
const maintainHistory = ref<any[]>([])
const repairList = ref<any[]>([])
@ -299,6 +308,10 @@ const repairDateRange = ref<string[] | undefined>()
const inspectionExportLoading = ref(false)
const maintainExportLoading = ref(false)
const repairExportLoading = ref(false)
const inspectionLoading = ref(false)
const repairLoading = ref(false)
const maintainLoading = ref(false)
const installLoading = ref(false)
const imageList = computed(() => parseImages(detailData.value?.images))
const lifeRate = computed<number | null>(() => {
@ -453,6 +466,10 @@ const goBack = () => {
router.push('/mold/mold-brand')
}
const goOperate = (type: number) => {
router.push({ path: '/mold/mold-brand', query: { operateType: String(type), moldId: String(detailData.value?.id) } })
}
const handleReservedAction = (action: string) => {
message.info(t('MoldManagement.MoldBrandDetail.reservedAction', { action }))
}
@ -494,49 +511,69 @@ const collectByChildMolds = async (worker: (moldId: number) => Promise<any>, mer
const fetchInspectionHistory = async () => {
if (!brandId.value) return
const params: any = { moldId: brandId.value }
if (inspectionDateRange.value && inspectionDateRange.value.length === 2) {
params.startTime = inspectionDateRange.value[0]
params.endTime = inspectionDateRange.value[1]
inspectionLoading.value = true
try {
const params: any = { moldId: brandId.value }
if (inspectionDateRange.value && inspectionDateRange.value.length === 2) {
params.startTime = inspectionDateRange.value[0]
params.endTime = inspectionDateRange.value[1]
}
const data = await TicketManagementApi.getInspectionByMoldId(params)
inspectionHistory.value = Array.isArray(data) ? data : []
} finally {
inspectionLoading.value = false
}
const data = await TicketManagementApi.getInspectionByMoldId(params)
inspectionHistory.value = Array.isArray(data) ? data : []
}
const fetchMaintainHistory = async () => {
if (!brandId.value) return
const params: any = { moldId: brandId.value }
if (maintainDateRange.value && maintainDateRange.value.length === 2) {
params.startTime = maintainDateRange.value[0]
params.endTime = maintainDateRange.value[1]
maintainLoading.value = true
try {
const params: any = { moldId: brandId.value }
if (maintainDateRange.value && maintainDateRange.value.length === 2) {
params.startTime = maintainDateRange.value[0]
params.endTime = maintainDateRange.value[1]
}
const data = await TicketManagementApi.getMaintenanceByMoldId(params)
maintainHistory.value = Array.isArray(data) ? data : []
} finally {
maintainLoading.value = false
}
const data = await TicketManagementApi.getMaintenanceByMoldId(params)
maintainHistory.value = Array.isArray(data) ? data : []
}
const fetchRepairHistory = async () => {
if (!brandId.value) return
const params: any = { moldId: brandId.value }
if (repairDateRange.value && repairDateRange.value.length === 2) {
params.startTime = repairDateRange.value[0]
params.endTime = repairDateRange.value[1]
repairLoading.value = true
try {
const params: any = { moldId: brandId.value }
if (repairDateRange.value && repairDateRange.value.length === 2) {
params.startTime = repairDateRange.value[0]
params.endTime = repairDateRange.value[1]
}
const data = await MoldRepairApi.getRepairListByMoldId(params)
repairList.value = Array.isArray(data) ? data : []
repairActiveNames.value = repairGroups.value.map((item) => item.key)
} finally {
repairLoading.value = false
}
const data = await MoldRepairApi.getRepairListByMoldId(params)
repairList.value = Array.isArray(data) ? data : []
repairActiveNames.value = repairGroups.value.map((item) => item.key)
}
const fetchInstallRecords = async () => {
if (!brandId.value) return
const params: any = { pageNo: installPageNo.value, pageSize: installPageSize.value, brandId: brandId.value }
if (installMoldId.value) params.moldId = installMoldId.value
if (installRemark.value) params.remark = installRemark.value
if (installDateRange.value && installDateRange.value.length === 2) {
params.createTime = [installDateRange.value[0], installDateRange.value[1]]
installLoading.value = true
try {
const params: any = { pageNo: installPageNo.value, pageSize: installPageSize.value, brandId: brandId.value }
if (installMoldId.value) params.moldId = installMoldId.value
if (installRemark.value) params.remark = installRemark.value
if (installDateRange.value && installDateRange.value.length === 2) {
params.createTime = [installDateRange.value[0], installDateRange.value[1]]
}
const data = await MoldOperateApi.getMoldOperatePage(params)
installRecords.value = data?.list ?? []
installTotal.value = data?.total ?? 0
} finally {
installLoading.value = false
}
const data = await MoldOperateApi.getMoldOperatePage(params)
installRecords.value = data?.list ?? []
installTotal.value = data?.total ?? 0
}
const handleQueryInstall = () => {
@ -605,13 +642,38 @@ const getDetail = async () => {
detailLoading.value = true
try {
detailData.value = await MoldBrandApi.getMoldBrand(brandId.value)
await getChildMolds()
await Promise.all([fetchInspectionHistory(), fetchMaintainHistory(), fetchRepairHistory(), fetchInstallRecords()])
} finally {
detailLoading.value = false
}
}
const loadTabData = async (tab: string) => {
if (loadedTabs.value.has(tab)) return
loadedTabs.value.add(tab)
switch (tab) {
case 'inspection':
await getChildMolds()
fetchInspectionHistory()
break
case 'repair':
await getChildMolds()
fetchRepairHistory()
break
case 'maintain':
await getChildMolds()
fetchMaintainHistory()
break
case 'install':
await getChildMolds()
fetchInstallRecords()
break
}
}
watch(activeTab, (val) => {
loadTabData(val)
})
onMounted(() => {
getDetail()
})

36
src/views/erp/mold/index.vue
Unescape Escape View File

@ -91,12 +91,12 @@
</template>
</el-table-column>
<el-table-column :label="t('MoldManagement.MoldBrandPage.moldSize')" prop="moldSize" width="90" align="center" />
<el-table-column :label="t('MoldManagement.MoldBrandPage.createTime')" prop="createTime" :formatter="dateFormatter" width="180" sortable />
<el-table-column :label="t('MoldManagement.MoldBrandPage.operate')" fixed="right" min-width="240">
<el-table-column :label="t('MoldManagement.MoldBrandPage.createTime')" prop="createTime" :formatter="dateFormatter" width="160" sortable />
<el-table-column :label="t('MoldManagement.MoldBrandPage.operate')" fixed="right" width="310">
<template #default="scope">
<el-button link type="primary" @click="openDetail(scope.row.id)">{{ t('MoldManagement.MoldBrandPage.detail') }}</el-button>
<el-button link type="primary" @click="openOperateForm(1, scope.row)">{{ t('MoldManagement.MoldBrandPage.moldUp') }}</el-button>
<el-button link type="primary" @click="openOperateForm(2, scope.row)">{{ t('MoldManagement.MoldBrandPage.moldDown') }}</el-button>
<el-button link type="primary" @click="openOperateForm(1, scope.row)" v-if="scope.row.status === 1">{{ t('MoldManagement.MoldBrandPage.moldUp') }}</el-button>
<el-button link type="primary" @click="openOperateForm(2, scope.row)" v-if="scope.row.status === 0">{{ t('MoldManagement.MoldBrandPage.moldDown') }}</el-button>
<el-button link type="warning" @click="handleReservedAction(t('MoldManagement.MoldBrandPage.repair'))">{{ t('MoldManagement.MoldBrandPage.repair') }}</el-button>
<el-button link type="primary" @click="previewQrcode(scope.row)">{{ t('MoldManagement.MoldBrandPage.qrcode') }}</el-button>
<el-button link type="primary" @click="openForm('update', scope.row.id)" v-hasPermi="['erp:mold-brand:update']">{{ t('MoldManagement.MoldBrandPage.edit') }}</el-button>
@ -118,16 +118,6 @@
<div class="mold-operate-page">
<div class="mold-operate-page__header">
<el-button @click="closeOperateForm"><Icon icon="ep:arrow-left" class="mr-5px" /> {{ t('MoldManagement.MoldBrandPage.back') }}</el-button>
<div class="mold-operate-page__tabs">
<el-button
:type="operateType === 1 ? 'primary' : ''"
@click="switchOperateType(1)"
>{{ t('MoldManagement.MoldBrandPage.moldUp') }}</el-button>
<el-button
:type="operateType === 2 ? 'primary' : ''"
@click="switchOperateType(2)"
>{{ t('MoldManagement.MoldBrandPage.moldDown') }}</el-button>
</div>
</div>
<!-- 模具信息卡片 -->
@ -271,6 +261,7 @@ defineOptions({ name: 'MoldBrand' })
const { t } = useI18n()
const message = useMessage()
const { push } = useRouter()
const route = useRoute()
const loading = ref(false)
const exportLoading = ref(false)
const list = ref<MoldBrandVO[]>([])
@ -484,10 +475,6 @@ const closeOperateForm = () => {
currentMold.value = null
}
const switchOperateType = (type: number) => {
operateType.value = type
}
const initOperateOptions = async () => {
// 获取产线选项
try {
@ -562,6 +549,17 @@ onMounted(async () => {
productOptions.value = await ProductApi.getMesProductSimpleList()
deviceOptions.value = await DeviceLedgerApi.getDeviceLedgerList()
await getList()
// 从详情页跳转过来，自动打开上下模操作
const { operateType: queryOperateType, moldId: queryMoldId } = route.query
if (queryOperateType && queryMoldId) {
const moldRow = list.value.find((item) => item.id === Number(queryMoldId))
if (moldRow) {
await openOperateForm(Number(queryOperateType), moldRow)
}
// 清除 query 参数，避免刷新重复触发
push({ path: route.path })
}
})
</script>
@ -706,7 +704,7 @@ onMounted(async () => {
}
.mold-operate-page__history {
width: 600px;
width: 30vw;
background: #fff;
border-radius: 12px;
padding: 20px;

Write Preview
Loading…
Cancel
Save