feat:模具管理-模具详情弹框

main
黄伟杰 3 weeks ago
parent 34c646313a
commit 3cb3e44700

@ -1,26 +1,16 @@
<template>
<!-- 列表 -->
<ContentWrap>
<el-button
type="primary"
plain
@click="openForm('create')"
v-hasPermi="['erp:mold-brand:create']"
>
<el-button type="primary" plain @click="openForm('create')" v-hasPermi="['erp:mold-brand:create']">
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="模具编码" align="center" prop="code"/>
<el-table-column label="模具编码" align="center" prop="code" />
<el-table-column label="模具名称" align="left" prop="name" />
<!-- <el-table-column label="单位" align="center" prop="unitName" /> -->
<el-table-column label="使用次数/次" align="center" prop="useTime" />
<el-table-column
label="入库时间"
align="center"
prop="inTime"
:formatter="dateFormatter"
/>
<el-table-column label="入库时间" align="center" prop="inTime" :formatter="dateFormatter" />
<el-table-column label="状态" align="center" prop="status">
<template #default="scope">
<dict-tag :type="DICT_TYPE.ERP_MOLD_STATUS" :value="scope.row.status" />
@ -29,21 +19,18 @@
<el-table-column label="使用设备" align="center" prop="machineId" />
<!-- <el-table-column label="模具图片" align="center" prop="images" /> -->
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="是否启用" align="center" prop="isEnable" >
<el-table-column label="是否启用" align="center" prop="isEnable">
<template #default="scope">
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="scope.row.isEnable" />
</template>
</el-table-column>
<el-table-column
label="创建时间"
align="center"
prop="createTime"
:formatter="dateFormatter"
width="180px"
/>
<el-table-column label="操作" align="center" fixed="right" width="150px">
<el-table-column label="创建时间" align="center" prop="createTime" :formatter="dateFormatter" width="180px" />
<el-table-column label="操作" align="center" fixed="right" width="200px">
<template #default="scope">
<el-button link @click="openDetail(scope.row.id)">
详情
</el-button>
<!-- <el-button
link
type="success"
@ -52,43 +39,122 @@
>
维保
</el-button> -->
<el-button
link
type="primary"
@click="openForm('update', scope.row.id)"
v-hasPermi="['erp:mold-brand:update']"
>
<el-button link type="primary" @click="openForm('update', scope.row.id)"
v-hasPermi="['erp:mold-brand:update']">
编辑
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['erp:mold-brand:delete']"
>
<el-button link type="danger" @click="handleDelete(scope.row.id)" v-hasPermi="['erp:mold-brand:delete']">
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
<Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
@pagination="getList" />
</ContentWrap>
<!-- 表单弹窗添加/修改 -->
<MoldForm ref="formRef" @success="getList" />
<!-- 表单弹窗添加/修改 -->
<MoldForm ref="formRef" @success="getList" />
<el-dialog v-model="detailVisible" title="模具详情" width="80%" :destroy-on-close="true">
<div v-loading="detailLoading">
<el-descriptions :column="3" class="mold-detail-desc">
<el-descriptions-item label="模具编号">{{ detailData?.code ?? '' }}</el-descriptions-item>
<el-descriptions-item label="模具名称">{{ detailData?.name ?? '' }}</el-descriptions-item>
<el-descriptions-item label="模具状态">
<dict-tag :type="DICT_TYPE.ERP_MOLD_STATUS" :value="detailData?.status" />
</el-descriptions-item>
<el-descriptions-item label="模具品牌">{{ detailData?.brandName ?? '' }}</el-descriptions-item>
<el-descriptions-item label="模具型号">{{ detailData?.brandName ?? '' }}</el-descriptions-item>
<el-descriptions-item label="模具规格">{{ detailData?.moldType ?? '' }}</el-descriptions-item>
<el-descriptions-item label="使用次数/次">{{ detailData?.useTime ?? '' }}</el-descriptions-item>
<el-descriptions-item label="使用设备">{{ detailData?.machineName ?? detailData?.machineId ?? ''
}}</el-descriptions-item>
<el-descriptions-item label="入库日期">{{ formatDetailDate(detailData?.inTime) }}</el-descriptions-item>
<el-descriptions-item label="上次保养日期">{{ formatDetailDate(detailData?.lastMaintainTime) }}</el-descriptions-item>
<el-descriptions-item label="上次维修日期">{{ formatDetailDate(detailData?.lastRepairTime) }}</el-descriptions-item>
<el-descriptions-item label="是否启用">
<dict-tag :type="DICT_TYPE.INFRA_BOOLEAN_STRING" :value="detailData?.isEnable" />
</el-descriptions-item>
<el-descriptions-item label="备注">{{ detailData?.remark ?? '' }}</el-descriptions-item>
</el-descriptions>
<el-tabs v-model="detailActiveTab" class="mt-12px">
<el-tab-pane label="点检履历" name="check">
<el-empty v-if="!inspectionHistoryView.length" />
<el-table v-else :data="inspectionHistoryView" :stripe="true" :show-overflow-tooltip="true"
class="mold-history-table">
<el-table-column label="项目" prop="name" min-width="160" />
<el-table-column label="方式" prop="method" min-width="120">
<template #default="scope">
<dict-tag type="Inspection_method" :value="scope.row.method" />
</template>
</el-table-column>
<el-table-column label="判定标准" prop="criteria" min-width="180" />
<el-table-column label="结果" align="center">
<template #default="scope">
<el-tag :type="getResultTagType(scope.row.result)">{{ getResultLabel(scope.row.result) }}</el-tag>
</template>
</el-table-column>
<el-table-column label="时间" prop="time" width="180" />
<el-table-column label="备注" prop="remark" min-width="200" />
</el-table>
</el-tab-pane>
<el-tab-pane label="保养履历" name="maintain">
<el-empty v-if="!maintainHistoryView.length" />
<el-table v-else :data="maintainHistoryView" :stripe="true" :show-overflow-tooltip="true"
class="mold-history-table">
<el-table-column label="项目" prop="name" min-width="160" />
<el-table-column label="方式" prop="method" min-width="120">
<template #default="scope">
<dict-tag type="Inspection_method" :value="scope.row.method" />
</template>
</el-table-column>
<el-table-column label="判定标准" prop="criteria" min-width="180" />
<el-table-column label="时间" prop="time" width="180" />
<el-table-column label="结果" align="center" width="80">
<template #default="scope">
<el-tag :type="getResultTagType(scope.row.result)">{{ getResultLabel(scope.row.result) }}</el-tag>
</template>
</el-table-column>
<el-table-column label="备注" prop="remark" min-width="200" />
</el-table>
</el-tab-pane>
<el-tab-pane label="维修履历" name="repair">
<el-empty v-if="!repairHistoryView.length" />
<el-table v-else :data="repairHistoryView" :stripe="true" :show-overflow-tooltip="true"
class="mold-history-table">
<el-table-column label="维修单ID" prop="repairId" width="120" />
<el-table-column label="项目编码" prop="subjectCode" width="120" />
<el-table-column label="项目名称" prop="subjectName" min-width="160" />
<el-table-column label="项目内容" prop="subjectContent" min-width="200" />
<el-table-column label="判定标准" prop="subjectStandard" min-width="200" />
<el-table-column label="故障描述" prop="malfunction" min-width="200" />
<el-table-column label="维修描述" prop="repairDes" min-width="200" />
<el-table-column label="备注" prop="remark" min-width="200" />
<el-table-column label="创建时间" prop="createTime" width="180">
<template #default="scope">
{{ formatHistoryTime(scope.row.createTime) }}
</template>
</el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="detailVisible = false"> </el-button>
</div>
</template>
</el-dialog>
<!-- 表单弹窗添加/修改 -->
<MoldRecordForm ref="recordFormRef" @success="getList" />
</template>
<script setup lang="ts">
import { DICT_TYPE } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
import { MoldBrandApi } from '@/api/erp/mold'
import { dateFormatter, formatDate } from '@/utils/formatTime'
import { MoldBrandApi, type MoldVO } from '@/api/erp/mold'
import MoldForm from './MoldForm.vue'
import MoldRecordForm from "@/views/erp/mold/components/MoldRecordForm.vue";
@ -135,7 +201,7 @@ watch(
queryParams.brandId = val
handleQuery()
},
{ immediate: true, deep: true }
{ immediate: true, deep: true }
)
/** 添加/修改操作 */
@ -158,13 +224,139 @@ const handleDelete = async (id: number) => {
message.success(t('common.delSuccess'))
//
await getList()
} catch {}
} catch { }
}
/** 添加/修改操作 */
const recordFormRef = ref()
const openRecordForm = (type: string, id?: number, brandId?:number) => {
const openRecordForm = (type: string, id?: number, brandId?: number) => {
recordFormRef.value.open(type, id, brandId)
}
const detailVisible = ref(false)
const detailLoading = ref(false)
const detailData = ref<(MoldVO & Record<string, any>) | null>(null)
const detailActiveTab = ref('check')
const formatDetailDate = (value: any) => {
if (!value) return ''
return formatDate(new Date(value), 'YYYY-MM-DD')
}
const formatHistoryTime = (value: any) => {
const raw = value ?? '-'
if (Array.isArray(raw) && raw.length >= 3) {
const [y, m, d, hh, mm, ss] = raw
const pad = (n: any) => String(n).padStart(2, '0')
if (hh !== undefined) return `${y}-${pad(m)}-${pad(d)} ${pad(hh)}:${pad(mm)}:${pad(ss)}`
return `${y}-${pad(m)}-${pad(d)}`
}
return String(raw)
}
const getResultLabel = (value: any) => {
const v = value === '' || value === null || value === undefined ? undefined : String(value)
if (v === '0') return '待检测'
if (v === '1') return 'OK'
if (v === '2') return 'NG'
return '-'
}
const getResultTagType = (value: any) => {
const v = value === '' || value === null || value === undefined ? undefined : String(value)
if (v === '1') return 'success'
if (v === '2') return 'danger'
if (v === '0') return 'info'
return 'info'
}
type SimpleHistoryRow = {
name: string
result: any
method?: any
criteria?: any
time?: string
remark?: any
}
const inspectionHistoryView = computed<SimpleHistoryRow[]>(() => {
const data: any = detailData.value
const list = data?.inspectionList ?? []
const rows = Array.isArray(list) ? list : []
return rows.map((row: any) => ({
name: String(row?.inspectionItemName ?? row?.name ?? ''),
result: row?.inspectionResult ?? row?.result,
method: row?.inspectionMethod ?? row?.method,
criteria: row?.judgmentCriteria ?? row?.criteria,
time: formatHistoryTime(row?.inspectionTime ?? row?.time ?? row?.createTime),
remark: row?.remark
}))
})
const maintainHistoryView = computed<SimpleHistoryRow[]>(() => {
const data: any = detailData.value
const list = data?.maintainList ?? []
const rows = Array.isArray(list) ? list : []
return rows.map((row: any) => ({
name: String(row?.maintainItemName ?? row?.inspectionItemName ?? row?.name ?? ''),
result: row?.maintainResult ?? row?.inspectionResult ?? row?.result,
method: row?.inspectionMethod ?? row?.method,
criteria: row?.judgmentCriteria ?? row?.criteria,
time: formatHistoryTime(row?.inspectionTime ?? row?.time ?? row?.createTime),
remark: row?.remark
}))
})
type RepairHistoryRow = {
repairId?: any
subjectCode?: any
subjectName?: any
subjectContent?: any
subjectStandard?: any
malfunction?: any
repairDes?: any
remark?: any
createTime?: any
}
const repairHistoryView = computed<RepairHistoryRow[]>(() => {
const data: any = detailData.value
const raw = data?.repairList
if (!raw) return []
if (Array.isArray(raw)) {
return raw as RepairHistoryRow[]
}
if (typeof raw === 'object') {
const result: RepairHistoryRow[] = []
Object.values(raw as Record<string, any>).forEach((rows: any) => {
if (Array.isArray(rows)) {
result.push(...(rows as RepairHistoryRow[]))
}
})
return result
}
return []
})
const openDetail = async (id: number) => {
detailVisible.value = true
detailActiveTab.value = 'check'
detailLoading.value = true
try {
detailData.value = await MoldBrandApi.getMold(id)
} finally {
detailLoading.value = false
}
}
</script>
<style scoped>
.mold-detail-desc {
margin-bottom: 16px;
}
.mold-history-table {
margin-top: 8px;
}
</style>

@ -2,7 +2,8 @@
<ContentWrap>
<el-form class="-mb-15px" :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
<el-form-item label="表名称" prop="name">
<el-input v-model="queryParams.name" placeholder="请输入表名称" clearable @keyup.enter="handleQuery"
<el-input
v-model="queryParams.name" placeholder="请输入表名称" clearable @keyup.enter="handleQuery"
class="!w-240px" />
</el-form-item>
@ -13,7 +14,8 @@
</el-form-item>
<el-form-item label="时间范围" prop="timeRange">
<el-date-picker v-model="queryParams.timeRange" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss"
<el-date-picker
v-model="queryParams.timeRange" type="datetimerange" value-format="YYYY-MM-DD HH:mm:ss"
format="YYYY-MM-DD HH" start-placeholder="请选择开始时间" end-placeholder="请选择结束时间"
:default-time="[new Date('2000-01-01 00:00:00'), new Date('2000-01-01 23:00:00')]"
:disabled-time="getDisabledTime" class="!w-360px " popper-class="energydevicecheckPicker"
@ -33,13 +35,15 @@
</el-form-item>
</el-form>
<el-table ref="tableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" row-key="id"
<el-table
ref="tableRef" v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" row-key="id"
:expand-row-keys="expandRowKeys" :row-class-name="getRowClassName" style="margin-top: 20px; min-height: 50vh"
@row-click="handleRowClick" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="50" align="center" />
<el-table-column type="expand" width="52">
<template #default="scope">
<el-table v-if="getPointDetailsRows(scope.row).length" :data="getPointDetailsRows(scope.row)"
<el-table
v-if="getPointDetailsRows(scope.row).length" :data="getPointDetailsRows(scope.row)"
:show-overflow-tooltip="true" size="small" border>
<el-table-column label="参数名称" prop="pointName" min-width="140" />
<el-table-column label="最早采集值" prop="earliestValue" min-width="120" />
@ -76,7 +80,8 @@
</el-table-column>
</el-table>
<Pagination :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
<Pagination
:total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
@pagination="getList" />
</ContentWrap>
</template>

@ -215,6 +215,7 @@ watch(
)
const formRules = reactive({
repairCode: [{ required: true, message: '维修单编号不能为空', trigger: 'blur' }],
repairName: [{ required: true, message: '维修单不能为空', trigger: 'blur' }],
moldId: [{ required: true, message: '模具不能为空', trigger: 'change' }],
})
const formRef = ref()

@ -21,7 +21,8 @@
</el-select>
</el-form-item>
<el-form-item label="起止日期" prop="dateRange">
<el-date-picker v-model="formData.dateRange" value-format="YYYY-MM-DD" type="daterange" start-placeholder=""
<el-date-picker
v-model="formData.dateRange" value-format="YYYY-MM-DD" type="daterange" start-placeholder="开始日期"
end-placeholder="结束日期" class="!w-320px" />
</el-form-item>
<el-form-item label="cron 表达式" prop="cronExpression">
@ -34,7 +35,8 @@
</el-form-item>
<el-form-item label="是否启用" prop="enabled">
<el-radio-group v-model="formData.enabled">
<el-radio v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)" :key="String(dict.value)"
<el-radio
v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)" :key="String(dict.value)"
:label="dict.value">
{{ dict.label }}
</el-radio>

Loading…
Cancel
Save