<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="12">
<el-form-item label="设备号/SN码" prop="devCode">
<el-input v-model.trim="form.devCode" :disabled="isEditMode" type="text" placeholder="必填" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="设备名称" prop="devName">
<el-input v-model.trim="form.devName" :disabled="isEditMode" type="text" placeholder="必填" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="IP">
<el-input v-model.trim="form.IP" :disabled="isEditMode" type="text" placeholder="IP" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="设备类型" prop="devType">
<el-select v-model="form.devType" placeholder="必填" :disabled="isEditMode">
<el-option
v-for="item in typeList"
:key="item.value"
:label="item.name"
:value="item.value"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="设备状态" prop="status">
<el-select v-model="form.status" placeholder="必填" :disabled="isEditMode">
<el-option value="0" label="在线"/>
<el-option value="1" label="离线"/>
<el-option value="2" label="故障"/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="安装时间">
<el-date-picker
:disabled="isEditMode"
style="width: 100%"
v-model="form.time"
type="date"
value-format="yyyy-MM-dd"
placeholder="安装时间"
/>
</el-form-item>
</el-col>
<el-col :span="24">
<el-form-item label="设备位置">
<el-input v-model.trim="form.position" :disabled="isEditMode" type="text" placeholder="设备位置" />
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20">
<el-col :span="24">
<el-form-item label="备注">
<el-input v-model.trim="form.remarks" :disabled="isEditMode" :rows="3" type="textarea" placeholder="备注" />
</el-form-item>
</el-col>
</el-row>
<div v-if="dialogStatus==='detail'">
<div style="font-weight: bold;margin-bottom:20px;font-size: 15px">状态计算与评判</div>
<el-row :gutter="20">
<el-col :span="8">
<el-form-item label="总修复时间(小时)">
<el-input v-model.trim="form.repairTotalTime" :disabled="true" type="text" placeholder="总修复时间" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="总恢复时间(小时)">
<el-input v-model.trim="form.recoveryTotalTime" :disabled="true" type="text" placeholder="总恢复时间" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="故障次数">
<el-input v-model.trim="form.failures" :disabled="true" type="text" placeholder="故障次数" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="MTTR(小时/次)">
<el-input v-model.trim="form.MTTR" :disabled="true" type="text" placeholder="MTTR" />
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="MTBF(小时/次)">
<el-input v-model.trim="form.MTBF" :disabled="true" type="text" placeholder="MTBF" />
</el-form-item>
</el-col>
</el-row>
</div>
</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 { addDevice, updateDevice } from '@/api/device'
import { getDictByCode } from '@/api/system/dict'
export default {
name: 'EditDevice',
data() {
return {
dialogFormVisible: false, // 对话框是否显示
dialogStatus: '', // 对话框类型：create,update
isEditMode: true,
form: {
id: '',
devCode: '',
devName: '',
IP:'',
devType:'',
status:'',
time: '',
position: '',
remarks:''
}, // 表单
typeList:[],
textMap: {
update: '编辑设备',
create: '新增设备',
detail: '设备详情'
}, // 表头显示标题
btnLoading: false, // 保存按钮的加载中状态
rules: {
devCode: [{ required: true, message: '设备号/SN码不能为空', trigger: ['blur', 'change'] }],
devName: [{ required: true, message: '设备名称不能为空', trigger: ['blur', 'change'] }],
devType : [{ required: true, message: '设备类型不能为空', trigger: ['blur', 'change'] }],
status: [{ required: true, message: '设备状态不能为空', trigger: ['blur', 'change'] }]
} // 前端校验规则
}
},
computed: {
},
created() {
this.fetchTypeList()
},
methods: {
fetchTypeList(){
getDictByCode('devType').then(response => {
if (response.code === 200) {
this.typeList = response.data
}
})
},
// 初始化对话框
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,
IP:row.IP,
devType:row.devType,
status:row.status,
time: row.time,
position: row.position,
remarks:row.remarks
}
this.isEditMode = false
}else if (dialogStatus === 'detail') {
this.form = {
id: row.id,
devCode: row.devCode,
devName: row.devName,
IP:row.IP,
devType:row.devType,
status:row.status,
time: row.time,
position: row.position,
remarks:row.remarks,
MTTR: row.MTTR,
MTBF: row.MTBF,
repairTotalTime:row.repairTotalTime,
recoveryTotalTime:row.recoveryTotalTime,
failures: row.failures
}
this.isEditMode = true
}
},
// 重置表单
resetForm() {
this.form = {
id: '',
devCode: '',
devName: '',
IP:'',
devType:'',
status:'',
time: '',
position: '',
remarks:''
}
},
// 保存数据
saveData: function() {
if (this.dialogStatus === 'update') {
this.updateData()
} else if (this.dialogStatus === 'create') {
this.createData()
}
},
// 新增数据
createData: function() {
this.$refs['dataForm'].validate((valid) => {
console.log(this.form)
if (valid) {
this.btnLoading = true
addDevice(this.form).then(response => {
if (response.code === 200) {
this.$confirm('新增成功，是否继续新增?', '提示', {
confirmButtonText: '是',
cancelButtonText: '否',
type: 'info'
}).then(() => { // 选是
this.resetForm()
this.btnLoading = false
this.$nextTick(() => {
this.$refs['dataForm'].clearValidate()
})
}).catch(() => { // 选否,关闭窗口，并刷新页面
this.$emit('watchChild')
this.dialogFormVisible = false
})
}
}).catch(_ => { // 异常情况，loading置为false
this.btnLoading = false
})
}
})
},
// 修改数据
updateData: function() {
this.$refs['dataForm'].validate((valid) => {
if (valid) {
this.btnLoading = true
updateDevice(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>
