You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
956 lines
35 KiB
Vue
956 lines
35 KiB
Vue
<template>
|
|
<div class="mold-maintain-page">
|
|
<div class="mold-maintain-page__header">
|
|
<el-button @click="emit('back')">
|
|
<Icon icon="ep:arrow-left" class="mr-5px" /> {{ t('MoldManagement.MoldBrandPage.back') }}
|
|
</el-button>
|
|
</div>
|
|
|
|
<div class="mold-maintain-page__body">
|
|
<!-- 左侧模具信息区域 -->
|
|
<div class="mold-maintain-page__sidebar" v-if="mold">
|
|
<div class="mold-maintain-page__info-card">
|
|
<div class="mold-maintain-page__info-header">
|
|
<span class="mold-maintain-page__info-num">1</span>
|
|
<span class="mold-maintain-page__info-title">{{ t('MoldManagement.MoldBrandPage.moldInfo') }}</span>
|
|
</div>
|
|
<div class="mold-maintain-page__info-image-wrap">
|
|
<el-image v-if="getImageList(mold.images).length" :src="getImageList(mold.images)[0]"
|
|
fit="cover" class="mold-maintain-page__info-image" />
|
|
<el-empty v-else :description="t('MoldManagement.MoldBrandDetail.noImage')" />
|
|
</div>
|
|
<div class="mold-maintain-page__info-item">
|
|
<span class="mold-maintain-page__info-label">{{ t('MoldManagement.MoldBrandPage.moldGroupCode') }}</span>
|
|
<span class="mold-maintain-page__info-value">{{ mold.code }}</span>
|
|
</div>
|
|
<div class="mold-maintain-page__info-item">
|
|
<span class="mold-maintain-page__info-label">{{ t('MoldManagement.MoldBrandPage.moldGroupName') }}</span>
|
|
<span class="mold-maintain-page__info-value">{{ mold.name }}</span>
|
|
</div>
|
|
<div class="mold-maintain-page__info-item">
|
|
<span class="mold-maintain-page__info-label">{{ t('MoldManagement.MoldBrandPage.productName') }}</span>
|
|
<span class="mold-maintain-page__info-value">{{ mold.productName }}</span>
|
|
</div>
|
|
<div class="mold-maintain-page__info-item">
|
|
<span class="mold-maintain-page__info-label">{{ t('MoldManagement.MoldBrandPage.moldSize') }}</span>
|
|
<span class="mold-maintain-page__info-value">{{ mold.moldSize }}</span>
|
|
</div>
|
|
<div class="mold-maintain-page__info-item">
|
|
<span class="mold-maintain-page__info-label">{{ t('MoldManagement.MoldBrandPage.status') }}</span>
|
|
<dict-tag :type="DICT_TYPE.ERP_MOLD_STATUS" :value="mold.status" />
|
|
</div>
|
|
<div class="mold-maintain-page__info-item">
|
|
<span class="mold-maintain-page__info-label">{{ t('MoldManagement.MoldBrandPage.currentDevice') }}</span>
|
|
<span class="mold-maintain-page__info-value">{{ mold.currentDevice || '-' }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧表单区域 -->
|
|
<div class="mold-maintain-page__form">
|
|
<div class="mold-maintain-page__form-header">
|
|
<span class="mold-maintain-page__info-num">2</span>
|
|
<span class="mold-maintain-page__info-title">{{ t('MoldManagement.MoldBrandPage.maintainInfo') }}</span>
|
|
</div>
|
|
<el-form ref="maintainFormRef" :model="formModel" :rules="formRules" label-width="100px">
|
|
<!-- 维护类型 -->
|
|
<el-form-item :label="t('MoldManagement.MoldBrandPage.maintainType')" prop="maintainType">
|
|
<div class="mold-maintain-type-card">
|
|
<div
|
|
v-for="type in maintainTypes"
|
|
:key="type.value"
|
|
class="mold-maintain-type-card__item"
|
|
:class="{ 'is-active': maintainFormData.maintainType === type.value }"
|
|
@click="selectMaintainType(type.value)"
|
|
>
|
|
<div class="mold-maintain-type-card__icon">
|
|
<el-icon :size="26">
|
|
<component :is="type.icon" />
|
|
</el-icon>
|
|
</div>
|
|
<span class="mold-maintain-type-card__label">{{ type.label }}</span>
|
|
</div>
|
|
</div>
|
|
</el-form-item>
|
|
|
|
<!-- 点检/保养表单 -->
|
|
<template v-if="isInspectOrMaintain">
|
|
<el-form-item :label="t('EquipmentManagement.TaskManagement.name')" prop="name">
|
|
<el-input v-model="taskFormData.name" :placeholder="t('EquipmentManagement.TaskManagement.placeholderName')" />
|
|
</el-form-item>
|
|
<el-form-item :label="t('EquipmentManagement.TaskManagement.projectForm')" prop="projectForm">
|
|
<div class="flex items-center gap-2 w-full">
|
|
<el-input
|
|
v-model="projectFormDisplayText"
|
|
readonly
|
|
:placeholder="t('EquipmentManagement.TaskManagement.placeholderProjectForm')"
|
|
class="flex-1"
|
|
/>
|
|
<el-button @click="openProjectFormDialog">{{ t('common.select') }}</el-button>
|
|
</div>
|
|
</el-form-item>
|
|
</template>
|
|
|
|
<!-- 维修表单 -->
|
|
<template v-if="isRepair">
|
|
<section class="dv-repair-section">
|
|
<div class="dv-repair-section__title">{{ t('MoldManagement.MoldRepair.basicInfo') }}</div>
|
|
<el-row :gutter="20">
|
|
<el-col :span="8">
|
|
<el-form-item :label="t('MoldManagement.MoldRepair.repairCode')" prop="repairCode">
|
|
<div class="dv-repair-code-row">
|
|
<el-input
|
|
:disabled="repairCodeDisabled"
|
|
v-model="repairFormData.repairCode"
|
|
:placeholder="t('common.code')"
|
|
/>
|
|
<el-switch
|
|
v-model="repairFormData.isCode"
|
|
/>
|
|
</div>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item :label="t('MoldManagement.MoldRepair.repairName')" prop="repairName">
|
|
<el-input
|
|
v-model="repairFormData.repairName"
|
|
:placeholder="t('MoldManagement.MoldRepair.placeholderRepairName')"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item :label="t('MoldManagement.MoldRepair.requireDate')" prop="requireDate">
|
|
<el-date-picker
|
|
v-model="repairFormData.requireDate"
|
|
type="date"
|
|
value-format="x"
|
|
:placeholder="t('MoldManagement.MoldRepair.placeholderRequireDate')"
|
|
class="!w-full"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="8">
|
|
<el-form-item :label="t('MoldManagement.MoldRepair.repairUser')" prop="acceptedBy">
|
|
<el-select
|
|
v-model="repairFormData.acceptedBy" filterable clearable
|
|
:placeholder="t('MoldManagement.MoldRepair.placeholderAcceptUser')"
|
|
class="!w-full">
|
|
<el-option v-for="item in users" :key="String(item.id)" :label="item.nickname" :value="String(item.id)" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item :label="t('MoldManagement.MoldRepair.confirmUser')" prop="confirmBy">
|
|
<el-select
|
|
v-model="repairFormData.confirmBy" filterable clearable
|
|
:placeholder="t('MoldManagement.MoldRepair.placeholderConfirmUser')"
|
|
class="!w-full">
|
|
<el-option v-for="item in users" :key="String(item.id)" :label="item.nickname" :value="String(item.id)" />
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="8">
|
|
<el-form-item :label="t('MoldManagement.MoldRepair.faultLevel')" prop="faultLevel">
|
|
<el-radio-group v-model="repairFormData.faultLevel">
|
|
<el-radio
|
|
v-for="dict in failureLevelOptions"
|
|
:key="String(dict.value)"
|
|
:label="String(dict.value)"
|
|
>
|
|
{{ dict.label }}
|
|
</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="8">
|
|
<el-form-item :label="t('MoldManagement.MoldRepair.isShutdown')" prop="shutdown">
|
|
<el-radio-group v-model="repairFormData.shutdown">
|
|
<el-radio :label="true">{{ t('common.yes') }}</el-radio>
|
|
<el-radio :label="false">{{ t('common.no') }}</el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</section>
|
|
|
|
<section class="dv-repair-section">
|
|
<div class="dv-repair-section__title">{{ t('MoldManagement.MoldRepair.faultInfo') }}</div>
|
|
<el-row :gutter="20">
|
|
<el-col :span="24">
|
|
<el-form-item :label="t('MoldManagement.MoldRepair.faultPhenomenon')" prop="faultPhenomenon">
|
|
<el-input
|
|
v-model="repairFormData.faultPhenomenon"
|
|
:placeholder="t('MoldManagement.MoldRepair.placeholderFaultPhenomenon')"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="t('MoldManagement.MoldRepair.faultDescription')" prop="faultDescription">
|
|
<el-input
|
|
v-model="repairFormData.faultDescription"
|
|
type="textarea"
|
|
:rows="4"
|
|
:placeholder="t('MoldManagement.MoldRepair.placeholderFaultDescription')"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<el-row :gutter="20">
|
|
<el-col :span="24">
|
|
<el-form-item :label="t('MoldManagement.MoldRepair.faultImages')">
|
|
<UploadImgs
|
|
v-model="faultImagesValue"
|
|
:limit="9"
|
|
width="120px"
|
|
height="120px"
|
|
class="dv-repair-upload"
|
|
/>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</section>
|
|
|
|
<section class="dv-repair-section">
|
|
<div class="dv-repair-section__title">{{ t('MoldManagement.MoldRepair.remark') }}</div>
|
|
<el-form-item prop="remark" label-width="0">
|
|
<el-input
|
|
v-model="repairFormData.remark"
|
|
type="textarea"
|
|
:rows="3"
|
|
maxlength="300"
|
|
show-word-limit
|
|
:placeholder="t('MoldManagement.MoldRepair.placeholderRemark')"
|
|
/>
|
|
</el-form-item>
|
|
</section>
|
|
</template>
|
|
|
|
<!-- 更换压网表单 -->
|
|
<template v-if="isReplaceNet">
|
|
<section class="dv-repair-section">
|
|
<div class="dv-repair-section__title">{{ t('MoldManagement.MoldBrandPage.maintainTypeReplaceNet') }}</div>
|
|
<el-form-item :label="t('MoldManagement.MoldBrandPage.subMold')" prop="moldId">
|
|
<el-select
|
|
v-model="replaceNetFormData.moldId"
|
|
filterable
|
|
clearable
|
|
:loading="subMoldLoading"
|
|
:placeholder="t('MoldManagement.MoldBrandPage.placeholderSubMold')"
|
|
class="!w-full"
|
|
@change="handleSubMoldChange"
|
|
>
|
|
<el-option
|
|
v-for="item in subMoldList"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
/>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item :label="t('MoldManagement.MoldBrandPage.pressureNetTime')" prop="pressureNetTime">
|
|
<el-date-picker
|
|
v-model="replaceNetFormData.pressureNetTime"
|
|
type="datetime"
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|
:placeholder="t('MoldManagement.MoldBrandPage.placeholderPressureNetTime')"
|
|
class="!w-full"
|
|
:disabled-date="(date: Date) => date.getTime() > Date.now()"
|
|
/>
|
|
</el-form-item>
|
|
<el-form-item :label="t('MoldManagement.MoldBrandPage.replaceNetRemark')" prop="replaceNetRemark">
|
|
<el-input
|
|
v-model="replaceNetFormData.remark"
|
|
type="textarea"
|
|
:rows="3"
|
|
maxlength="300"
|
|
show-word-limit
|
|
:placeholder="t('MoldManagement.MoldBrandPage.placeholderReplaceNetRemark')"
|
|
/>
|
|
</el-form-item>
|
|
</section>
|
|
</template>
|
|
</el-form>
|
|
|
|
<div class="mold-maintain-page__form-actions">
|
|
<el-button @click="emit('back')">{{ t('MoldManagement.MoldBrandPage.cancel') }}</el-button>
|
|
<el-button type="primary" @click="submitForm" :loading="submitLoading">{{ t('MoldManagement.MoldBrandPage.submit') }}</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 项目表单选择弹框 -->
|
|
<Dialog v-model="projectFormDialogVisible" :title="t('EquipmentManagement.TaskManagement.projectForm')" width="1200px">
|
|
<div class="project-form-dialog-content">
|
|
<el-table
|
|
ref="projectFormTableRef"
|
|
v-loading="projectFormLoading"
|
|
:data="projectFormList"
|
|
row-key="id"
|
|
@expand-change="handleProjectFormExpandChange"
|
|
>
|
|
<el-table-column width="55" align="center">
|
|
<template #default="scope">
|
|
<el-radio
|
|
v-model="tempSelectedProjectFormId"
|
|
:value="String(scope.row.id)"
|
|
@change="handleProjectFormRadioChange(scope.row)"
|
|
/>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column type="expand" width="48">
|
|
<template #default="scope">
|
|
<div class="p-12px">
|
|
<el-table
|
|
v-loading="subjectLoadingMap[String(scope.row.id)]"
|
|
:data="subjectListMap[String(scope.row.id)] ?? []"
|
|
:stripe="true"
|
|
:show-overflow-tooltip="true"
|
|
size="small"
|
|
>
|
|
<el-table-column :label="t('MoldManagement.MoldInspectionPlan.index')" align="center" width="80">
|
|
<template #default="s2">
|
|
{{ s2.$index + 1 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column :label="t('MoldManagement.MoldInspectionPlan.subjectCode')" align="center" prop="subjectCode" />
|
|
<el-table-column :label="t('MoldManagement.MoldInspectionPlan.subjectName')" align="center" prop="subjectName" />
|
|
<el-table-column :label="t('MoldManagement.MoldInspectionPlan.inspectionMethod')" align="center" prop="inspectionMethod" width="120" />
|
|
<el-table-column :label="t('MoldManagement.MoldInspectionPlan.judgmentCriteria')" align="center" prop="judgmentCriteria" />
|
|
</el-table>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column :label="t('MoldManagement.MoldInspectionPlan.index')" align="center" width="80">
|
|
<template #default="scope">
|
|
{{ (projectFormPageParams.pageNo - 1) * projectFormPageParams.pageSize + scope.$index + 1 }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column :label="t('MoldManagement.MoldInspectionPlan.planName')" prop="planName" min-width="160" />
|
|
<el-table-column :label="t('MoldManagement.MoldInspectionPlan.planType')" width="110">
|
|
<template #default="scope">
|
|
<el-tag effect="light" :type="scope.row.planType === 1 ? 'success' : 'primary'" size="small">
|
|
{{ scope.row.planType === 1 ? t('MoldManagement.MoldInspectionPlan.planTypeMaintain') : t('MoldManagement.MoldInspectionPlan.planTypeInspect') }}
|
|
</el-tag>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column :label="t('MoldManagement.MoldInspectionPlan.description')" prop="description" min-width="200" />
|
|
<el-table-column :label="t('MoldManagement.MoldInspectionPlan.creatorName')" prop="creatorName" width="140" />
|
|
<el-table-column :label="t('MoldManagement.MoldInspectionPlan.createTime')" prop="createTime" :formatter="dateFormatter" width="180" />
|
|
<el-table-column :label="t('MoldManagement.MoldInspectionPlan.updateTime')" prop="updateTime" :formatter="dateFormatter" width="180" />
|
|
</el-table>
|
|
<Pagination
|
|
:total="projectFormTotal"
|
|
v-model:page="projectFormPageParams.pageNo"
|
|
v-model:limit="projectFormPageParams.pageSize"
|
|
@pagination="loadProjectFormList"
|
|
/>
|
|
</div>
|
|
<template #footer>
|
|
<el-button @click="projectFormDialogVisible = false">{{ t('common.cancel') }}</el-button>
|
|
<el-button type="primary" @click="confirmProjectFormSelection">{{ t('common.ok') }}</el-button>
|
|
</template>
|
|
</Dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, reactive, computed, watch } from 'vue'
|
|
import { EditPen, RefreshRight, Search, Tools } from '@element-plus/icons-vue'
|
|
import { MoldBrandApi, type MoldBrandVO } from '@/api/erp/mold'
|
|
import { DeviceLedgerApi, type DeviceLedgerVO } from '@/api/mes/deviceledger'
|
|
import { TaskManagementApi } from '@/api/mold/taskManagement'
|
|
import { MoldRepairApi, type MoldRepairVO } from '@/api/mold/moldrepair'
|
|
import { PlanMaintenanceApi } from '@/api/mold/planmaintenance'
|
|
import { getSimpleUserList, type UserVO } from '@/api/system/user'
|
|
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
|
|
import { dateFormatter } from '@/utils/formatTime'
|
|
|
|
defineOptions({ name: 'MoldMaintainView' })
|
|
|
|
const props = defineProps<{
|
|
mold: MoldBrandVO | null
|
|
deviceOptions: DeviceLedgerVO[]
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
(e: 'back'): void
|
|
(e: 'success'): void
|
|
}>()
|
|
|
|
const { t } = useI18n()
|
|
const message = useMessage()
|
|
|
|
const submitLoading = ref(false)
|
|
const maintainFormRef = ref()
|
|
|
|
// 表单验证规则
|
|
const formRules = reactive({
|
|
maintainType: [{ required: true, message: t('MoldManagement.MoldBrandPage.placeholderMaintainType'), trigger: 'change' }],
|
|
// 点检/保养表单规则
|
|
name: [{ required: true, message: t('EquipmentManagement.TaskManagement.placeholderName'), trigger: 'blur' }],
|
|
taskType: [{ required: true, message: t('EquipmentManagement.TaskManagement.placeholderTaskType'), trigger: 'change' }],
|
|
projectForm: [{ required: true, message: t('EquipmentManagement.TaskManagement.placeholderProjectForm') }],
|
|
// 维修表单规则
|
|
repairName: [{ required: true, message: t('MoldManagement.MoldRepair.validatorRepairNameRequired'), trigger: 'blur' }],
|
|
requireDate: [{ required: true, message: t('MoldManagement.MoldRepair.validatorRequireDateRequired'), trigger: 'change' }],
|
|
faultLevel: [{ required: true, message: t('MoldManagement.MoldRepair.validatorFaultLevelRequired'), trigger: 'blur' }],
|
|
shutdown: [{ required: true, message: t('MoldManagement.MoldRepair.validatorIsShutdownRequired'), trigger: 'blur' }],
|
|
faultPhenomenon: [{ required: true, message: t('MoldManagement.MoldRepair.validatorFaultPhenomenonRequired'), trigger: 'blur' }],
|
|
// 压网表单规则
|
|
moldId: [{ required: true, message: t('MoldManagement.MoldBrandPage.validatorSubMoldRequired'), trigger: 'blur' }],
|
|
pressureNetTime: [{ required: true, message: t('MoldManagement.MoldBrandPage.validatorPressureNetTimeRequired'), trigger: 'blur' }],
|
|
})
|
|
|
|
// 合并表单模型，用于 el-form 验证
|
|
const formModel = computed(() => ({
|
|
maintainType: maintainFormData.maintainType,
|
|
name: taskFormData.name,
|
|
taskType: taskFormData.taskType,
|
|
projectForm: taskFormData.projectForm,
|
|
repairName: repairFormData.repairName,
|
|
requireDate: repairFormData.requireDate,
|
|
faultLevel: repairFormData.faultLevel,
|
|
shutdown: repairFormData.shutdown,
|
|
faultPhenomenon: repairFormData.faultPhenomenon,
|
|
moldId: replaceNetFormData.moldId,
|
|
pressureNetTime: replaceNetFormData.pressureNetTime,
|
|
}))
|
|
|
|
// 维护类型
|
|
const maintainFormData = reactive({
|
|
maintainType: 1 as number
|
|
})
|
|
|
|
// 点检/保养表单数据
|
|
const taskFormData = reactive({
|
|
name: undefined as string | undefined,
|
|
taskType: 1 as number,
|
|
projectForm: '' as string
|
|
})
|
|
|
|
// 维修表单数据
|
|
const repairFormData = reactive({
|
|
repairCode: undefined as string | undefined,
|
|
repairName: undefined as string | undefined,
|
|
requireDate: undefined as string | undefined,
|
|
acceptedBy: undefined as string | undefined,
|
|
confirmBy: undefined as string | undefined,
|
|
faultLevel: undefined as string | undefined,
|
|
shutdown: undefined as boolean | undefined,
|
|
faultPhenomenon: undefined as string | undefined,
|
|
faultDescription: undefined as string | undefined,
|
|
faultImages: '' as string,
|
|
remark: undefined as string | undefined,
|
|
isCode: true as boolean
|
|
})
|
|
|
|
// 更换压网表单数据
|
|
const replaceNetFormData = reactive({
|
|
moldId: undefined as number | undefined,
|
|
moldName: undefined as string | undefined,
|
|
pressureNetTime: undefined as string | undefined,
|
|
remark: undefined as string | undefined
|
|
})
|
|
|
|
// 子模具下拉选项
|
|
const subMoldList = ref<any[]>([])
|
|
const subMoldLoading = ref(false)
|
|
|
|
const loadSubMoldList = async () => {
|
|
if (!props.mold?.id) return
|
|
subMoldLoading.value = true
|
|
try {
|
|
const data = await MoldBrandApi.getMoldList({ brandId: props.mold.id })
|
|
subMoldList.value = data ?? []
|
|
} finally {
|
|
subMoldLoading.value = false
|
|
}
|
|
}
|
|
|
|
const handleSubMoldChange = (moldId: number) => {
|
|
const selected = subMoldList.value.find((item: any) => item.id === moldId)
|
|
replaceNetFormData.moldName = selected?.name ?? ''
|
|
}
|
|
|
|
// 计算属性
|
|
const isInspectOrMaintain = computed(() => [1, 2].includes(maintainFormData.maintainType ?? 0))
|
|
const isRepair = computed(() => maintainFormData.maintainType === 3)
|
|
const isReplaceNet = computed(() => maintainFormData.maintainType === 4)
|
|
const repairCodeDisabled = computed(() => repairFormData.isCode === true)
|
|
const failureLevelOptions = computed(() => getStrDictOptions(DICT_TYPE.FAILURE_LEVEL))
|
|
|
|
// 维护类型配置
|
|
const maintainTypes = computed(() => [
|
|
{ value: 1, label: t('MoldManagement.MoldBrandPage.maintainTypeInspect'), icon: Search },
|
|
{ value: 2, label: t('MoldManagement.MoldBrandPage.maintainTypeMaintain'), icon: Tools },
|
|
{ value: 3, label: t('MoldManagement.MoldBrandPage.maintainTypeRepair'), icon: EditPen },
|
|
{ value: 4, label: t('MoldManagement.MoldBrandPage.maintainTypeReplaceNet'), icon: RefreshRight }
|
|
])
|
|
|
|
// 项目表单下拉选项（用于旧逻辑兼容，不再使用 select 下拉展示）
|
|
const planOptions = ref<{ id: number | string; planName: string }[]>([])
|
|
const users = ref<UserVO[]>([])
|
|
|
|
// 项目表单弹框相关
|
|
const projectFormDialogVisible = ref(false)
|
|
const projectFormLoading = ref(false)
|
|
const projectFormList = ref<any[]>([])
|
|
const projectFormTotal = ref(0)
|
|
const projectFormTableRef = ref()
|
|
const tempSelectedProjectForm = ref<any>(null) // 弹框中临时选中的行
|
|
const tempSelectedProjectFormId = ref<string>('') // 弹框中 radio 绑定的 id
|
|
const selectedProjectFormId = ref<string>('') // 已确认选中的 id
|
|
const selectedProjectFormName = ref<string>('') // 已确认选中的名称
|
|
const subjectListMap = ref<Record<string, any[]>>({})
|
|
const subjectLoadingMap = ref<Record<string, boolean>>({})
|
|
|
|
const projectFormPageParams = reactive({
|
|
pageNo: 1,
|
|
pageSize: 10
|
|
})
|
|
|
|
const projectFormDisplayText = computed(() => {
|
|
return selectedProjectFormName.value || ''
|
|
})
|
|
|
|
const loadProjectFormList = async () => {
|
|
projectFormLoading.value = true
|
|
try {
|
|
const res = await PlanMaintenanceApi.getPlanMaintenancePage({
|
|
pageNo: projectFormPageParams.pageNo,
|
|
pageSize: projectFormPageParams.pageSize
|
|
})
|
|
projectFormList.value = res?.list ?? []
|
|
projectFormTotal.value = res?.total ?? 0
|
|
} finally {
|
|
projectFormLoading.value = false
|
|
}
|
|
}
|
|
|
|
const openProjectFormDialog = async () => {
|
|
projectFormPageParams.pageNo = 1
|
|
tempSelectedProjectForm.value = null
|
|
tempSelectedProjectFormId.value = selectedProjectFormId.value || ''
|
|
projectFormDialogVisible.value = true
|
|
await loadProjectFormList()
|
|
}
|
|
|
|
const handleProjectFormRadioChange = (row: any) => {
|
|
tempSelectedProjectForm.value = row
|
|
}
|
|
|
|
const confirmProjectFormSelection = () => {
|
|
if (!tempSelectedProjectForm.value) return
|
|
selectedProjectFormId.value = String(tempSelectedProjectForm.value.id)
|
|
selectedProjectFormName.value = tempSelectedProjectForm.value.planName ?? String(tempSelectedProjectForm.value.id)
|
|
taskFormData.projectForm = selectedProjectFormId.value
|
|
projectFormDialogVisible.value = false
|
|
}
|
|
|
|
const ensureSubjectListLoaded = async (planId: number | string) => {
|
|
const key = String(planId)
|
|
if (!key) return
|
|
if (subjectListMap.value[key]) return
|
|
subjectLoadingMap.value[key] = true
|
|
try {
|
|
const res = await PlanMaintenanceApi.getSubjectList(planId)
|
|
const data = Array.isArray(res) ? res : res?.list ?? res ?? []
|
|
subjectListMap.value[key] = (data ?? [])
|
|
} finally {
|
|
subjectLoadingMap.value[key] = false
|
|
}
|
|
}
|
|
|
|
const handleProjectFormExpandChange = async (row: any, expandedRows: any[]) => {
|
|
const isExpanded = expandedRows.some((r) => String(r.id) === String(row.id))
|
|
if (!isExpanded) return
|
|
if (row?.id === undefined || row?.id === null || row?.id === '') return
|
|
await ensureSubjectListLoaded(row.id)
|
|
}
|
|
|
|
const ensureUsersLoaded = async () => {
|
|
if (users.value.length) return
|
|
users.value = (await getSimpleUserList()) ?? []
|
|
}
|
|
|
|
const normalizeUserId = (value: any) => {
|
|
if (value === undefined || value === null || value === '') return undefined
|
|
const str = String(value)
|
|
if (/^\d+$/.test(str)) return str
|
|
const matched = users.value.find((u) => u.nickname === str)
|
|
return matched ? String(matched.id) : str
|
|
}
|
|
|
|
const splitImageValue = (value: unknown) => {
|
|
if (Array.isArray(value)) return value.map((item) => String(item).trim()).filter(Boolean)
|
|
if (typeof value !== 'string') return []
|
|
return value
|
|
.split(',')
|
|
.map((item) => item.trim())
|
|
.filter(Boolean)
|
|
}
|
|
|
|
const normalizeImageString = (value: unknown) => splitImageValue(value).join(',')
|
|
|
|
const faultImagesValue = computed<string[]>({
|
|
get: () => splitImageValue(repairFormData.faultImages),
|
|
set: (value) => { repairFormData.faultImages = value.join(',') }
|
|
})
|
|
|
|
const getImageList = (images?: string) => {
|
|
if (!images) return []
|
|
return String(images)
|
|
.split(',')
|
|
.map((item) => item.trim())
|
|
.filter(Boolean)
|
|
}
|
|
|
|
const initOptions = async () => {
|
|
const [planRes, userRes] = await Promise.all([
|
|
PlanMaintenanceApi.getPlanMaintenancePage({}),
|
|
getSimpleUserList()
|
|
])
|
|
planOptions.value = (planRes?.list ?? []) as { id: number | string; planName: string }[]
|
|
users.value = userRes ?? []
|
|
}
|
|
|
|
const handleMaintainTypeChange = () => {
|
|
// 切换维护类型时同步 taskType
|
|
if (isInspectOrMaintain.value) {
|
|
taskFormData.taskType = maintainFormData.maintainType
|
|
}
|
|
}
|
|
|
|
const selectMaintainType = async (type: number) => {
|
|
maintainFormData.maintainType = type
|
|
handleMaintainTypeChange()
|
|
// 切换类型时刷新对应下拉框选项
|
|
await initOptions()
|
|
// 切换到压网时加载子模具列表
|
|
if (type === 4) {
|
|
await loadSubMoldList()
|
|
}
|
|
}
|
|
|
|
const submitForm = async () => {
|
|
// 表单验证
|
|
try {
|
|
await maintainFormRef.value?.validate()
|
|
} catch {
|
|
return
|
|
}
|
|
submitLoading.value = true
|
|
try {
|
|
if (isInspectOrMaintain.value) {
|
|
// 提交点检/保养任务
|
|
await TaskManagementApi.createMoldTicketDirect({
|
|
name: taskFormData.name,
|
|
taskType: String(taskFormData.taskType),
|
|
moldList: props.mold?.id ? String(props.mold.id) : undefined,
|
|
projectForm: taskFormData.projectForm
|
|
})
|
|
message.success(t('common.createSuccess'))
|
|
// 清空已提交的表单数据
|
|
taskFormData.name = undefined
|
|
taskFormData.projectForm = ''
|
|
selectedProjectFormId.value = ''
|
|
selectedProjectFormName.value = ''
|
|
} else if (isRepair.value) {
|
|
// 提交维修单
|
|
const payload: any = {
|
|
repairCode: repairFormData.isCode ? undefined : repairFormData.repairCode,
|
|
repairName: repairFormData.repairName,
|
|
moldId: props.mold?.id,
|
|
moldCode: props.mold?.code ?? '',
|
|
moldName: props.mold?.name ?? '',
|
|
machinerySpec: '',
|
|
requireDate: repairFormData.requireDate,
|
|
repairResult: '',
|
|
repairStatus: '',
|
|
acceptedBy: normalizeUserId(repairFormData.acceptedBy),
|
|
confirmBy: normalizeUserId(repairFormData.confirmBy),
|
|
faultLevel: repairFormData.faultLevel,
|
|
shutdown: repairFormData.shutdown,
|
|
faultPhenomenon: repairFormData.faultPhenomenon,
|
|
faultDescription: repairFormData.faultDescription,
|
|
faultImages: normalizeImageString(repairFormData.faultImages),
|
|
isCode: repairFormData.isCode,
|
|
repairedImages: '',
|
|
remark: repairFormData.remark
|
|
}
|
|
await MoldRepairApi.createMoldRepair(payload)
|
|
message.success(t('common.createSuccess'))
|
|
// 先清除校验，再清空数据，避免触发必填校验
|
|
maintainFormRef.value?.clearValidate()
|
|
repairFormData.repairCode = undefined
|
|
repairFormData.repairName = undefined
|
|
repairFormData.requireDate = undefined
|
|
repairFormData.acceptedBy = undefined
|
|
repairFormData.confirmBy = undefined
|
|
repairFormData.faultLevel = undefined
|
|
repairFormData.shutdown = undefined
|
|
repairFormData.faultPhenomenon = undefined
|
|
repairFormData.faultDescription = undefined
|
|
repairFormData.faultImages = ''
|
|
repairFormData.remark = undefined
|
|
repairFormData.isCode = true
|
|
} else if (isReplaceNet.value) {
|
|
// 提交更换压网记录
|
|
await MoldBrandApi.createPressureNetRecord({
|
|
moldBrandId: props.mold?.id,
|
|
moldBrandName: props.mold?.name ?? '',
|
|
moldId: replaceNetFormData.moldId,
|
|
moldName: replaceNetFormData.moldName ?? '',
|
|
pressureNetTime: replaceNetFormData.pressureNetTime,
|
|
remark: replaceNetFormData.remark
|
|
})
|
|
message.success(t('common.createSuccess'))
|
|
// 清空已提交的表单数据
|
|
replaceNetFormData.moldId = undefined
|
|
replaceNetFormData.moldName = undefined
|
|
replaceNetFormData.pressureNetTime = undefined
|
|
replaceNetFormData.remark = undefined
|
|
await nextTick()
|
|
maintainFormRef.value?.clearValidate()
|
|
}
|
|
emit('success')
|
|
} catch (error) {
|
|
console.error(t('MoldManagement.MoldBrandPage.submitFailed'), error)
|
|
} finally {
|
|
submitLoading.value = false
|
|
}
|
|
}
|
|
|
|
const open = async () => {
|
|
maintainFormData.maintainType = 1
|
|
await initOptions()
|
|
}
|
|
|
|
defineExpose({ open })
|
|
</script>
|
|
|
|
<style scoped>
|
|
.mold-maintain-page__header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.mold-maintain-page__info-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16px;
|
|
padding: 20px;
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
|
flex: 1;
|
|
}
|
|
|
|
.mold-maintain-page__info-header,
|
|
.mold-maintain-page__form-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.mold-maintain-page__info-num {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 22px;
|
|
height: 22px;
|
|
border-radius: 50%;
|
|
background: var(--el-color-primary);
|
|
color: #fff;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.mold-maintain-page__info-title {
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
color: var(--el-text-color-primary);
|
|
}
|
|
|
|
.mold-maintain-page__info-image-wrap {
|
|
display: flex;
|
|
justify-content: left;
|
|
}
|
|
|
|
.mold-maintain-page__info-image {
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: 8px;
|
|
border: 1px solid var(--el-border-color-lighter);
|
|
}
|
|
|
|
.mold-maintain-page__info-empty {
|
|
width: 120px;
|
|
height: 120px;
|
|
border-radius: 8px;
|
|
border: 1px dashed var(--el-border-color-lighter);
|
|
}
|
|
|
|
.mold-maintain-page__info-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.mold-maintain-page__info-label {
|
|
color: var(--el-text-color-secondary);
|
|
font-size: 13px;
|
|
white-space: nowrap;
|
|
flex-shrink: 0;
|
|
width: 90px;
|
|
text-align: left;
|
|
}
|
|
|
|
.mold-maintain-page__info-value {
|
|
color: var(--el-text-color-primary);
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
flex: 1;
|
|
text-align: left;
|
|
}
|
|
|
|
.mold-maintain-page__body {
|
|
display: flex;
|
|
gap: 20px;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.mold-maintain-page__sidebar {
|
|
width: 20vw;
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
}
|
|
|
|
.mold-maintain-page__form {
|
|
flex: 1;
|
|
background: #fff;
|
|
border-radius: 12px;
|
|
padding: 24px 32px;
|
|
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
:deep(.el-form-item__label) {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.mold-maintain-page__form-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 12px;
|
|
margin-top: 24px;
|
|
padding-top: 16px;
|
|
border-top: 1px solid var(--el-border-color-lighter);
|
|
}
|
|
|
|
.dv-repair-section {
|
|
margin-bottom: 20px;
|
|
padding: 16px;
|
|
background: #f8f9fa;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
.dv-repair-section__title {
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: #303133;
|
|
margin-bottom: 16px;
|
|
padding-left: 8px;
|
|
border-left: 3px solid #409eff;
|
|
}
|
|
|
|
.dv-repair-label {
|
|
display: inline-flex;
|
|
gap: 4px;
|
|
align-items: center;
|
|
|
|
&.is-required::before {
|
|
color: var(--el-color-danger);
|
|
content: '*';
|
|
}
|
|
}
|
|
|
|
.dv-repair-code-row {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
}
|
|
|
|
/* 维护类型卡片样式 */
|
|
.mold-maintain-type-card {
|
|
display: flex;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.mold-maintain-type-card__item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100px;
|
|
height: 100px;
|
|
border-radius: 12px;
|
|
border: 2px solid var(--el-border-color-lighter);
|
|
cursor: pointer;
|
|
transition: all 0.25s ease;
|
|
background: #fff;
|
|
|
|
&:hover {
|
|
border-color: var(--el-color-primary);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
&.is-active {
|
|
border-color: var(--el-color-primary);
|
|
background: rgba(64, 158, 255, 0.06);
|
|
box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
|
|
}
|
|
}
|
|
|
|
.mold-maintain-type-card__icon {
|
|
width: 44px;
|
|
height: 44px;
|
|
border-radius: 12px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--el-color-primary);
|
|
background: var(--el-color-primary-light-9);
|
|
transition: transform 0.25s ease;
|
|
|
|
.mold-maintain-type-card__item:hover & {
|
|
transform: scale(1.1);
|
|
}
|
|
}
|
|
|
|
.mold-maintain-type-card__label {
|
|
font-size: 14px;
|
|
color: var(--el-text-color-primary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.mold-maintain-type-card__item.is-active .mold-maintain-type-card__label {
|
|
color: var(--el-color-primary);
|
|
}
|
|
|
|
.project-form-dialog-content {
|
|
max-height: 500px;
|
|
overflow-y: auto;
|
|
}
|
|
</style>
|