| New file |
| | |
| | | <template> |
| | | <el-dialog v-model="visible" :title="titleEnum[dialogMode]" @closed="handleClosed" destroy-on-close> |
| | | <div v-if="dialogReadonly"> |
| | | <el-row> |
| | | <el-col :span="12"> |
| | | <div>设备名称: {{ deviceName }}</div> |
| | | </el-col> |
| | | <el-col :span="12"> |
| | | <div>维护计划: {{ planCycleLabel }}</div> |
| | | </el-col> |
| | | </el-row> |
| | | </div> |
| | | <el-form v-else ref="formRef" :model="formData" :rules="rules" :disabled="dialogReadonly" label-width="100px"> |
| | | <el-row> |
| | | <el-col :span="24"> |
| | | <el-form-item label="维护内容" prop="maintainContent"> |
| | | <el-input |
| | | v-model="formData.maintainContent" |
| | | maxlength="200" |
| | | type="textarea" |
| | | placeholder="请输入" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | <el-col :span="24"> |
| | | <el-form-item label="更换部件" prop="replacePart"> |
| | | <el-input v-model="formData.replacePart" maxlength="200" type="textarea" placeholder="请输入" clearable /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-col :span="12"> |
| | | <el-form-item label="实际维护时间" prop="maintainTime"> |
| | | <el-date-picker |
| | | v-model="formData.maintainTime" |
| | | type="date" |
| | | placeholder="选择日期" |
| | | value-format="YYYY-MM-DD HH:mm:ss" |
| | | clearable |
| | | /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-form> |
| | | <template #footer> |
| | | <el-button @click="handleCancel">{{ dialogReadonly ? '关闭' : '取消' }}</el-button> |
| | | <el-button |
| | | v-if="!dialogReadonly" |
| | | type="primary" |
| | | :loading="submitting" |
| | | :disabled="submitting" |
| | | @click="handleSubmit" |
| | | > |
| | | 确定 |
| | | </el-button> |
| | | </template> |
| | | </el-dialog> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { computed, ref } from 'vue' |
| | | import { ElMessage } from 'element-plus' |
| | | import { fieldRules } from '@ztzf/utils' |
| | | import { fwDeviceMaintainRecordSubmitApi } from '@/views/basicManage/maintainRecord/fwDeviceMaintainRecord' |
| | | import { fwDeviceMaintainPlanDetailApi } from '@/views/basicManage/maintainRecord/maintainRecordApi' |
| | | |
| | | const initForm = () => ({ |
| | | deviceId: '', |
| | | id: '', |
| | | maintainContent: '', |
| | | replacePart: '', |
| | | maintainTime: '', |
| | | }) |
| | | |
| | | const planCycleOptions = [ |
| | | { label: '每年', value: '1' }, |
| | | { label: '每月', value: '2' }, |
| | | { label: '每周', value: '3' }, |
| | | ] |
| | | |
| | | const emit = defineEmits(['success']) |
| | | const formRef = ref(null) // 表单实例 |
| | | const formData = ref(initForm()) // 表单数据 |
| | | const visible = ref(false) // 弹框显隐 |
| | | const dialogMode = ref('add') // 弹框模式 |
| | | const submitting = ref(false) // 提交中 |
| | | const deviceList = ref([]) // 设备列表 |
| | | |
| | | const dialogReadonly = computed(() => dialogMode.value === 'view') |
| | | const titleEnum = ref({ edit: '编辑', view: '查看', add: '维护计划' }) |
| | | |
| | | const planCycleLabel = computed(() => { |
| | | const item = planCycleOptions.find(option => option.value === formData.value.planCycleType) |
| | | return item?.label || formData.value.planCycleType || '-' |
| | | }) |
| | | const deviceName = computed(() => { |
| | | const target = deviceList.value.find(item => item.id === formData.value.deviceId) |
| | | return formData.value.deviceName || target?.deviceName || '-' |
| | | }) |
| | | |
| | | const rules = { |
| | | maintainContent: fieldRules(true, 200), |
| | | replacePart: fieldRules(true, 200), |
| | | maintainTime: fieldRules(true, 0), |
| | | } |
| | | |
| | | // 关闭弹框 |
| | | function handleCancel() { |
| | | visible.value = false |
| | | } |
| | | |
| | | // 提交新增/编辑 |
| | | async function handleSubmit() { |
| | | const isValid = await formRef.value?.validate().catch(() => false) |
| | | if (!isValid) return |
| | | submitting.value = true |
| | | try { |
| | | await fwDeviceMaintainRecordSubmitApi(formData.value) |
| | | ElMessage.success(dialogMode.value === 'add' ? '新增成功' : '更新成功') |
| | | visible.value = false |
| | | emit('success') |
| | | } finally { |
| | | submitting.value = false |
| | | } |
| | | } |
| | | |
| | | // 加载详情 |
| | | async function loadDetail() { |
| | | console.log(formData.value) |
| | | if (!formData.value.id) return |
| | | const res = await fwDeviceMaintainPlanDetailApi({ id: formData.value.id }) |
| | | formData.value = { |
| | | planId: res?.data?.data?.id, |
| | | deviceId: res?.data?.data.deviceId, |
| | | } |
| | | } |
| | | |
| | | // 关闭后重置 |
| | | function handleClosed() { |
| | | formData.value = initForm() |
| | | } |
| | | |
| | | // 打开弹框 |
| | | async function open({ mode, row } = {}) { |
| | | dialogMode.value = mode || 'add' |
| | | visible.value = true |
| | | if (dialogMode.value === 'add') { |
| | | formData.value = initForm() |
| | | } else { |
| | | formData.value = row |
| | | await loadDetail() |
| | | } |
| | | } |
| | | |
| | | defineExpose({ open }) |
| | | </script> |