<template> <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" append-to-body> <el-form ref="dataForm" :rules="rules" :model="form" label-position="right" label-width="130px"> <el-row :gutter="20"> <el-col :span="10" :offset="1"> <el-form-item label="设备号/SN码" prop="devCode"> <el-input v-model.trim="form.devCode" :disabled="true" type="text" placeholder="必填" /> </el-form-item> </el-col> <el-col :span="10"> <el-form-item label="设备名称" prop="devName"> <el-input v-model.trim="form.devName" :disabled="true" type="text" placeholder="必填" /> </el-form-item> </el-col> <el-col :span="10" :offset="1"> <el-form-item label="总修复时间(小时)" prop="repairTotalTime"> <el-input v-model.trim="form.repairTotalTime" :disabled="isEditMode" type="text" placeholder="总修复时间" /> </el-form-item> </el-col> <el-col :span="10"> <el-form-item label="总恢复时间(小时)" prop="recoveryTotalTime"> <el-input v-model.trim="form.recoveryTotalTime" :disabled="isEditMode" type="text" placeholder="总恢复时间" /> </el-form-item> </el-col> <el-col :span="10" :offset="1"> <el-form-item label="故障次数"> <el-input-number v-model.trim="form.failures" :disabled="isEditMode" type="text" style="width: 100%" placeholder="故障次数" /> </el-form-item> </el-col> </el-row> <el-row :gutter="20"> <el-col :span="10" :offset="1"> <el-form-item label="MTTR(小时/次)" prop="MTTR"> <el-input v-model.trim="form.MTTR" :disabled="isEditMode" type="text" placeholder="MTTR" /> </el-form-item> </el-col> <el-col :span="10"> <el-form-item label="MTBF(小时/次)" prop="MTBF"> <el-input v-model.trim="form.MTBF" :disabled="isEditMode" type="text" placeholder="MTBF" /> </el-form-item> </el-col> </el-row> </el-form> <div slot="footer" class="dialog-footer" v-if="!isEditMode"> <el-button :loading="btnLoading" type="primary" @click="saveData"> 保存 </el-button> <el-button @click="cancel"> 取消 </el-button> </div> </el-dialog> </template> <script> import { updateStatus } from '@/api/device' import { getDictByCode } from '@/api/system/dict' import { validateFloatPlus } from '@/utils/validate' export default { name: 'EditStatus', data() { const validateFloat = (rule, value, callback) => { if (value !== '') { if (validateFloatPlus(value,0,100000000) === true) { callback() } else { callback(new Error('请输入正数')) } } } return { dialogFormVisible: false, // 对话框是否显示 dialogStatus: '', // 对话框类型:create,update isEditMode: true, form: { id:'', devCode:'', devName:'', MTTR: '', MTBF:'', repairTotalTime:'', recoveryTotalTime:'', failures: '' }, // 表单 typeList:[], textMap: { update: '设备状态计算', create: '设备状态计算', detail: '设备状态计算' }, // 表头显示标题 btnLoading: false, // 保存按钮的加载中状态 rules: { MTTR: [{ required: false, validator: validateFloat, trigger: ['blur', 'change'] }], MTBF:[{ required: false, validator: validateFloat,trigger: ['blur', 'change'] }], repairTotalTime:[{ required: false,validator: validateFloat, trigger: ['blur', 'change'] }], recoveryTotalTime:[{ required: false,validator: validateFloat, trigger: ['blur', 'change'] }], } // 前端校验规则 } }, computed: { }, created() { }, methods: { // 初始化对话框 initDialog: function(dialogStatus, row = null) { this.dialogStatus = dialogStatus this.dialogFormVisible = true this.btnLoading = false if (dialogStatus === 'create') { // 如果是新增,清除验证 this.resetForm() this.isEditMode = false this.$nextTick(() => { this.$refs['dataForm'].clearValidate() }) } else if (dialogStatus === 'update') { // 如果是修改,将row中数据填写到输入框中 this.form = { id:row.id, devCode:row.devCode, devName:row.devName, MTTR: row.MTTR, MTBF:row.MTBF, repairTotalTime:row.repairTotalTime, recoveryTotalTime:row.recoveryTotalTime, failures: row.failures } this.isEditMode = false }else if (dialogStatus === 'detail') { this.form = { id:row.id, devCode:row.devCode, devName:row.devName, MTTR: row.MTTR, MTBF: row.MTBF, repairTotalTime:row.repairTotalTime, recoveryTotalTime:row.recoveryTotalTime, failures: row.failures } this.isEditMode = true } }, // 重置表单 resetForm() { this.form = { id:'', devCode:'', devName:'', MTTR: '', MTBF:'', repairTotalTime:'', recoveryTotalTime:'', failures: '' } }, // 保存数据 saveData: function() { this.updateData() }, // 修改数据 updateData: function() { this.$refs['dataForm'].validate((valid) => { if (valid) { this.btnLoading = true updateStatus(this.form).then(response => { if (response.code === 200) { this.$message.success('修改成功') this.$refs['dataForm'].clearValidate() this.$emit('watchChild') this.dialogFormVisible = false } }).catch(_ => { // 异常情况,loading置为false this.btnLoading = false }) } }) }, cancel: function() { this.dialogFormVisible = false // this.$emit('watchChild') } } } </script> <style rel="stylesheet/scss" lang="scss" scoped> .el-dialog{ width:700px } .el-select{ width: 100%; } </style>